0

I got a SQL Table with column names as Name, Ascii_Name, Alternate Names. When user types name from the set of values, the auto complete has to display values correspondingly.

For example if the user types 'Aba' it has to show all the values that start with 'Aba' including the ones in 'alternate names' column which doesn't follow this pattern like abt. To make it more clear another example is as soon as he types Abayah, it has to display all the names which follow this pattern including the ones from alternate names as well like abahyahran,abayrafda.

+------------+------------------+--------------------------------------------------+
| Name       | Ascii_Name       |                Alternate_names                   |
+------------+------------------+--------------------------------------------------+
| Abat       | Abat1            | Abat, Abat1, abt                                 |
| Abayahr    | Abayahr1         | Abayahr,Abayahr1, abayahr, abahyahran, abayrafda |
| Abayah     | Abayah1          | Abayah,Abayah1, abayahtr, abayahnwer             |
| Abath      | Abath1           | Abath, Abath1, abatgh, abatdfg                   |
| Carne      | Carnt            | Carne, Carnt, canrtrt, carnas                    |
+------------+------------------+--------------------------------------------------+

I'm kind of clueless in achieving this requirement, any advise or suggestions or pointers in this direction would be appreciated.

I'm not asking for any code only indicators or broad guidelines in achieving this.

3
  • 2
    Look at HTML5 <datalist> and then rendering your table data into the page that way. Commented Dec 13, 2017 at 6:09
  • Please clarify whether you are using WebForms or MVC. Commented Dec 13, 2017 at 15:41
  • @SeaCharp Webforms Commented Dec 14, 2017 at 3:08

2 Answers 2

2

You can either use stored procedure or LINQ with Entity Framework. Here is an example of stored procedure.

Stored procedure:

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO

CREATE PROCEDURE [dbo].[AutoComplete_Search]
     @keyword NVARCHAR(50)
AS
BEGIN
    SELECT Name, Ascii_Name, Alternate_names
    FROM your_table
    WHERE Name LIKE '%' + @keyword + '%' OR Ascii_Name LIKE '%' + @keyword + '%' OR Alternate_names LIKE '%' + @keyword + '%'

END

.cshtml code is:

<script type="text/javascript">
        $(function () {
            $("#txtCustomer").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'keyword': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",

                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#hfCustomer").val(i.item.val);
                },
                minLength: 1
            });
        });
    </script>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="text" id="txtCustomer" name="CustomerName" />    
    }

This is controller.

[HttpPost]
public JsonResult AutoComplete(string keyword)
{
    using (DatabaseEntities entities = new DatabaseEntities())
    {
        var records = entities.AutoComplete_Search(keyword).ToList();
        return Json(records);
    }
}
Sign up to request clarification or add additional context in comments.

Comments

0

You might use the Ajax Control Toolkit. Example:

<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods = "true">
</asp:ScriptManager>

<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers"
    MinimumPrefixLength="2"
    CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
    TargetControlID="txtContactsSearch"
    ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false">
</cc1:AutoCompleteExtender>

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchCustomers(string prefixText, int count)
{
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager
                .ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "select ContactName from Customers where " +
            "ContactName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            cmd.Connection = conn;
            conn.Open();
            List<string> customers = new List<string>();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(sdr["ContactName"].ToString());
                }
            }
            conn.Close();
            return customers;
        }
    }
}

https://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx

https://ajaxcontroltoolkit.devexpress.com/AutoComplete/AutoComplete.aspx

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.