JQuery UI Автозаполнение Список предложений Нажмите событие

Question

Привет, у меня есть автозаполнение jquery, которое отлично работает, делая предложения, но когда я нажимаю на элемент в списке предложений, я не могу получить событие для запуска. У меня также есть keyup даже в том же текстовом поле, чтобы заполнить список данными, основанными на вводе. То, что мне нужно сделать, это запустить то же самое, что срабатывает при keyup при нажатии на предложение автозаполнения. Работает с выбором стрелки вниз, но не с щелчком мыши.

Вот код asp.net:

<asp:TextBox ID="txtSearch" runat="server" Width="450px" />

Это jquery для автозаполнения:

$("#<%=txtSearch.ClientID %>").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '../WebServices/ModelSearch.asmx/JquerySearchSrn',
                data: "{ 'prefixText': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            label: item.split('|')[0],
                            val: item.split('|')[1]
                        }
                    }))
                },
                error: function(response) {
                    alert(response.responseText);
                },
                failure: function(response) {
                    alert(response.responseText);
                }
            });
        },
        select: function() {
            debugger;
            $('#<%=lsResults.ClientID %>').children().remove();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                //data: "{ prefixText: '" + $('#<%=txtSearch.ClientID %>').val() + "', count: '5'}",
                data: "{ sText: '" + $('#<%=txtSearch.ClientID %>').val() + "', sFilter: '" + $('#<%=ddlProductLine.ClientID %>').val() + "'}",
                url: "../WebServices/ModelSearch.asmx/GetResults",
                dataType: "json",
                success: function(data) {
                    //debugger;
                    var results = data.d;
                    //alert(results.length.toString());
                    if (results.length > 0) {
                        var listItems = [];
                        var j = 1;
                        //for (var i in results) {
                        for (i = 0; i < results.length; i += 2) {
                            //debugger;
                            listItems.push('<option value="' +
                            results[i] + '">' + results[j]
                            + '</option>');
                            //key + '">' + results[key].text
                            //i++;
                            j += 2;
                        }
                        $('#<%=lsResults.ClientID %>').append(listItems.join(''));
                        $('#<%=lsResults.ClientID %>').attr('size', 10);
                        /* test event.type and event.target to capture only select control changes */
                    }
                },
                error: function(response) {
                    alert(response.responseText);
                }
            });
        },

        minLength: 2
    });

У меня также есть это событие keyup для txtSearch:

$('#<%=txtSearch.ClientID %>').keyup(function() {

        if ($('#<%=txtSearch.ClientID %>').val().length > 1) {
            $('#<%=lsResults.ClientID %>').children().remove();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                //data: "{ prefixText: '" + $('#<%=txtSearch.ClientID %>').val() + "', count: '5'}",
                data: "{ sText: '" + $('#<%=txtSearch.ClientID %>').val() + "', sFilter: '" + $('#<%=ddlProductLine.ClientID %>').val() + "'}",
                url: "../WebServices/ModelSearch.asmx/GetResults",
                dataType: "json",
                success: function(data) {
                    //debugger;
                    var results = data.d;
                    //alert(results.length.toString());
                    if (results.length > 0) {
                        var listItems = [];
                        var j = 1;
                        //for (var i in results) {
                        for (i = 0; i < results.length; i += 2) {
                            //debugger;
                            listItems.push('<option value="' +
                            results[i] + '">' + results[j]
                            + '</option>');
                            //key + '">' + results[key].text
                            //i++;
                            j += 2;
                        }
                        $('#<%=lsResults.ClientID %>').append(listItems.join(''));
                        $('#<%=lsResults.ClientID %>').attr('size', 10);
                        /* test event.type and event.target to capture only select control changes */
                    }
                },
                error: function(response) {
                    alert(response.responseText);
                }
            });
        }

    });

Я попытался просто вызвать функцию .keyup в txtSearch, чтобы мне не пришлось дублировать код, но он не работает, если я не сделаю это в консоли Chrome Javascript. У кого-нибудь есть предложения или как правильно сделать эту функцию?

Спасибо, Nathan

Answer 1

Спасибо за ваш ответ. Я пытался выбрать событие, но оно не сработало для меня.

Я решил эту проблему, настроив класс тегов li, которые отображаются как предложения. Функция выбора не запускает событие keyup, которое мне нужно было вызвать. Вот что я сделал:

$('.ui-corner-all').click(function() {
   $('#<%=txtSearch.ClientID %>').keyup();
});

Answer 2

Плагин jQuery UI запускает события для некоторых действий. К названию события добавляется имя плагина. Таким образом, для события select вы можете связать с `autocompleteselect '.

Посмотрев на исходный код, вы увидите, что select и change запускаются.

var myHandler = function() { ... };


$("#<%=txtSearch.ClientID %>")
   .autocomplete({...})
   .bind('autocompleteselect', myHandler);

---

Редактировать: неправильно понял вопрос, надеюсь, я понял его прямо сейчас. Если вы хотите, чтобы одна и та же функция вызывалась в обработчике select и в keyup, объявите ее, как указано выше, и укажите ее для обоих обработчиков:

var getResults= function() { ... /* execute ajax */ ... };


$("#<%=txtSearch.ClientID %>")
   .autocomplete({
       source: [],
       select: function() {
           ...
           getResults();
           ...
       }
    })
   .keyup(function() {
       // check the type of key that was pressed
       // (to avoid initiate an ajax request if the user pushed "num lock" for inst.)

       if (keyIsOk) {

           // work with a setTimeout, to try avoid messing up if a user types too fast
           getResults();
       }
   });

Хотя запуск ajax-запроса для каждого keyup может быть не очень хорошей идеей, это вызовет много запросов.

д.