Запуск события select по клику для автозаполнения jQuery

Question

Немного поиграв с функцией автозаполнения jQuery, я не смог заставить событие select срабатывать по клику. Что странно, потому что событие onfocus срабатывает, когда мышь перетаскивают на каждый элемент в списке. Из того, что я пробовал до сих пор, не похоже, что есть встроенный способ запуска события select по клику. Я что-то пропустил? Или есть другой способ, которым люди имели дело с этим в прошлом?

Спасибо заранее, * Brandon * 1003

Answer 1

Выбранное событие должно срабатывать автоматически при нажатии. Рассмотрим следующий блок кода. Здесь я передаю набор обработчиков, чтобы решить, например, какой URL-адрес использовать, к какой метке прикрепить поведение автозаполнения и т. Д. В конечном итоге я делаю ajax-запрос для заполнения списка автозаполнения.

    ActivateInputFieldSearch: function (callBack, fieldID, urlHandler, labelHandler, valueHandler) {
        $("#" + fieldID).autocomplete({
            source: function (request, response) {
                var requestUrl;
                if (_.isFunction(urlHandler)) {
                    requestUrl = urlHandler(request);
                } else {
                    requestUrl = urlHandler;
                }
                $.ajax({
                    url: requestUrl,
                    dataType: "json",
                    data: {
                        maxRows: 10,
                        searchParameter: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            var dataJson = $.parseJSON(item);
                            return {
                                label: labelHandler(dataJson),
                                value: valueHandler(dataJson),
                                data: dataJson
                            };
                        }));
                    }
                });
            },
            minLength: 0,
            select: function (event, ui) {
                if (callBack) {
                    callBack(ui.item);
                }
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            },
            focus: function (event, ui) {
                $("#" + fieldID).val(ui.item.value);
            }
        });
    }

Answer 2

У меня была похожая проблема.Я пытался использовать автозаполнение в 3 текстовых полях.Если пользователь начнет вводить текст в любом из трех текстовых полей, вызов ajax сработает и вернет все различные комбинации этих полей в базе данных в зависимости от того, что было введено в них.

Важная часть того, чтоЯ пытаюсь сказать, что у меня была проблема "щелчка мышью нет автозаполнения".У меня была функция стрельбы on select, чтобы установить значения для всех текстовых полей.Это было что-то вроде этого:

function showAutocompleteDropDown( a_options ){

    console.log('options: ' + a_options);

    if ( a_options == "" ){
        // nothing to do
        return;
    }// if

    // find out which text box the user is typing in and put the drop down of choices underneath it
    try{
        // run jquery autocomplete with results from ajax call
        $(document.activeElement).autocomplete({
            source: eval(a_options),
            select: function(event, ui){

                console.log( 'event: ' + event.type );
                console.log( ' running select ' );

                // set the value of the currently focused text box to the correct value
                if (event.type == "autocompleteselect"){
                    console.log( "logged correctly: " + ui.item.value );
                    ui.item.value = fillRequestedByInformation( );
                }
                else{
                    console.log( "INCORRECT" );
                }

            }// select
        });
    }
    catch(e){
        alert( e );
    }// try / catch
}// showAutocompleteDropDown()

function fillRequestedByInformation( ){
    // split the values apart in the name attribute of the selected option and put the values in the appropriate areas
    var requestedByValues = $(document.activeElement).val().split(" || ");

    var retVal = $(document.activeElement).val();

    $(document.activeElement).val("");
    var currentlyFocusedID = $(document.activeElement).attr("id");


    console.log( 'requestedByValues: ' + requestedByValues );
    console.log( 'requestedByValues.length: ' + requestedByValues.length );

    for (index = 0; index < requestedByValues.length; index++ ){
        console.log( "requestedByValues[" + index + "]: " + requestedByValues[index] );
        switch ( index ){
            case 0:
                if ( currentlyFocusedID == "RequestedBy" ){
                    retVal = requestedByValues[index];
                }
                $('#RequestedBy').val(requestedByValues[index]);
                break;
            case 1:
                if ( currentlyFocusedID == "RequestedByEmail" ){
                    retVal = requestedByValues[index];
                }
                $('#RequestedByEmail').val(requestedByValues[index]);
                break;
            case 2:
                if ( currentlyFocusedID == "RequestedByPhone" ){
                    retVal = requestedByValues[index];
                }
                $('#RequestedByPhone').val(requestedByValues[index]);
                break;
            default:
                break;
        }
    }
}// fillRequestedByInformation()

, а затем я изменил его на следующее:

function showAutocompleteDropDown( a_options ){

    console.log('options: ' + a_options);

    if ( a_options == "" ){
        // nothing to do
        return;
    }// if

    // find out which text box the user is typing in and put the drop down of choices underneath it
    try{
        // run jQuery autocomplete with results from ajax call
        $(document.activeElement).autocomplete({
            source: eval(a_options),
            select: function(event, ui){

                console.log( 'event: ' + event.type );
                console.log( ' running select ' );

                // set the value of the currently focused text box to the correct value
                if (event.type == "autocompleteselect"){
                    console.log( "logged correctly: " + ui.item.value );
                    ui.item.value = fillRequestedByInformation( ui.item.value );
                }
                else{
                    console.log( "INCORRECT" );
                }

            }// select
        });
    }
    catch(e){
        alert( e );
    }// try / catch
}// showAutocompleteDropDown()

function fillRequestedByInformation( a_requestedByValues ){
    // split the values apart in the name attribute of the selected option and put the values in the appropriate areas
    var requestedByValues = a_requestedByValues.split(" || ");

    var retVal = $(document.activeElement).val();

    $(document.activeElement).val("");
    var currentlyFocusedID = $(document.activeElement).attr("id");


    console.log( 'requestedByValues: ' + requestedByValues );
    console.log( 'requestedByValues.length: ' + requestedByValues.length );

    for (index = 0; index < requestedByValues.length; index++ ){
        console.log( "requestedByValues[" + index + "]: " + requestedByValues[index] );
        switch ( index ){
            case 0:
                if ( currentlyFocusedID == "RequestedBy" ){
                    retVal = requestedByValues[index];
                }
                $('#RequestedBy').val(requestedByValues[index]);
                break;
            case 1:
                if ( currentlyFocusedID == "RequestedByEmail" ){
                    retVal = requestedByValues[index];
                }
                $('#RequestedByEmail').val(requestedByValues[index]);
                break;
            case 2:
                if ( currentlyFocusedID == "RequestedByPhone" ){
                    retVal = requestedByValues[index];
                }
                $('#RequestedByPhone').val(requestedByValues[index]);
                break;
            default:
                break;
        }
    }
}// fillRequestedByInformation()

Отладка все еще там, но изменение было в событии selectв автозаполнении, добавив параметр к функции fillRequestedByInformation() и первую строку указанной функции.Он возвращает и перезаписывает ui.item.value, чтобы получить правильное значение для этого поля вместо выбранного значения.

Пример выбранного значения автозаполнения:

"John Doe || john.doe@internet.net || 1-222-123-1234"

Также используется eval( a_options )чтобы автозаполнение могло использовать a_options.прежде чем я использовал eval, он бы даже не узнал, что у меня есть значения в источнике.a_options является результатом.

Answer 3

Я думаю, вам нужно событие select

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

http://jqueryui.com/demos/autocomplete/#event-select