點擊jQuery自動補全點擊選擇事件

Question

玩了jQuery的自動補全功能後，我無法讓選擇事件觸發onclick。這很奇怪，因爲當鼠標拖到列表中的每個元素上時，onfocus事件觸發。從目前爲止我嘗試過的方式來看，它看起來並不像內置的方式讓onclick觸發select事件。我錯過了什麼嗎？或者還有另外一種人們過去處理過這種情況的方式嗎？

由於提前， 布蘭登

Answer 1

我認爲你需要的select事件

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

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

Answer 2

選定的事件應該在點擊自動閃光。考慮下面的代碼塊。在這裏，我傳入一組處理程序來決定使用哪些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 3

我有類似的問題。我試圖在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是結果。