javascriptc#asp.netautocompleteextender

Asp.net autocompleteextender selection issue with cursor point


I have use autocompleteextender for textbox autocomplete. I have written addition js for suggestion & value selection. Problem is after type ing some letter if I move my cursor from top to bottom then it doesn't select value where cursor is pointed. It selects value above cursor position. This problem only when cursor moves from top to bottom. Works fine when move bottom to top.

In following snapshot you can see where my cursor position & it highlighting value above. enter image description here

    <asp:TextBox ID="clientCode" runat="server" CssClass="field-pitch" ClientIDMode="Static"></asp:TextBox>

    <asp:AutoCompleteExtender ServiceMethod="SearchClientCode"
 ServicePath="~/auto.aspx" MinimumPrefixLength="1" CompletionInterval="100"
 EnableCaching="false" CompletionSetCount="10" TargetControlID="clientCode"
 ID="clientCodeExtender" runat="server" FirstRowSelected="false"
 CompletionListCssClass="completionList" CompletionListItemCssClass="listItem"
 CompletionListHighlightedItemCssClass="itemHighlighted"
 OnClientPopulated="onClientPopulated" OnClientItemSelected="itemSelected"
 BehaviorID="AutoCompleteEx"></asp:AutoCompleteExtender>

            <script type="text/javascript">
                function itemSelected(ev) {
                    var index = $find("AutoCompleteEx")._selectIndex;
                    if (index != -1) {
                        $find("AutoCompleteEx").get_element().value = $find("AutoCompleteEx").get_completionList().childNodes[index]._value;
                    }
                    else {
                        $find("AutoCompleteEx").get_element().value = '';
                    }
                }

                function onClientPopulated(sender, e) {
                    var List = $find("AutoCompleteEx").get_completionList();
                    for (i = 0; i < List.childNodes.length; i++) {
                        var _value = JSON.parse(List.childNodes[i]._value);
                        var abbr = _value[0];
                        var fullform = _value[1];
                        List.childNodes[i]._value = abbr;
                        List.childNodes[i].innerHTML = "<span>" + abbr + "(" + fullform + ")</span>"
                    }
                }
          </script>

code behind

[System.Web.Script.Services.ScriptMethod(), System.Web.Services.WebMethod()]
public static List<string> SearchClientCode(string prefixText, int count)
{
    MySqlConnection conn = new MySqlConnection();
    conn.ConnectionString = ConfigurationManager.ConnectionStrings("conio").ConnectionString;
    MySqlCommand cmd = new MySqlCommand();
    cmd.CommandText = "SELECT clientID, clientName FROM clientsDetails where (clientID like @SearchText)";
    cmd.Parameters.AddWithValue("@SearchText", prefixText + Convert.ToString("%"));
    cmd.Connection = conn;
    conn.Open();
    List<string> customers = new List<string>();
    MySqlDataReader sdr = cmd.ExecuteReader;
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    while (sdr.Read) {
        object[] item = new object[] {
            sdr("clientID").ToString(),
            sdr("clientName").ToString()
        };
        customers.Add(serializer.Serialize(item));
    }
    conn.Close();
    return customers;
}

Solution

  • You should use the given parameters of the OnClientItemSelected method:

    function itemSelected(source, eventArgs) {
        $find("AutoCompleteEx").get_element().value = eventArgs.get_value();
    }