Question

稍微使用jQuery的自动完成功能后，我无法点击选择事件。这很奇怪，因为当鼠标拖过列表中的每个元素时会触发onfocus事件。从我到目前为止所尝试的情况来看，看起来并没有内置的方法可以点击onclick选择事件。我错过了什么吗？或者，过去人们有另一种处理方式吗？

提前致谢，布兰登

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

单击jQuery自动完成时触发select事件

3 个答案: