jQuery的自動完成選擇不觸發

Question

我使用jQuery jquery-1.10.2和jQuery UI 1.11.4

這裏是自動完成功能：

$("#txtPOI").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: '<?php echo site_url("crowd/get_POIs") ?>', 
      data: {cat: selectedCode, q: request.term}, 
      dataType: "json", 
      type: "post", 
      success: function(data) { 

       response($.map(data, function(item) 
       { 
        return{ 
          label: item.title, 
          value: item.title, 
          contentid: item.contentid, 
          latitude: item.latitude, 
          longitude: item.longitude 
         } 
       })); 

      }, 
      fail : function (jqXHR, textStatus, errorThrown) { 
       console.log(jqXHR); 
       console.log(textStatus); 
       console.log(errorThrown); 
      }, 
      select: function(event, ui) { 
       $("#txtPOI").val(ui.item.latitude); 
       alert('selected'); 
       /* 
       alert(ui.item.contentid); 
       log(ui.item ? 
        "Selected: " + ui.item.label : 
        "Nothing selected, input was " + this.title); 
       alert(ui.item.value); 
       */ 
      }, 
      open: function(event, ui) { 
       $(".ui-autocomplete").css("z-index", 1000); 
      }, 
      minLength: 3 

     }); 
    } 
}); 

Ajax響應成功地從數據庫返回的數據。然而，當我試圖在select內部做點什麼時，什麼也沒有發生，似乎select沒有被觸發。在選擇自動填充項目後，我希望獲得值ui.item.contentid以及ui.item.latitude和ui.item.longitude。

爲什麼select事件沒有被觸發？如何解決這個問題？

Answer 1

Select是自動完成對象不是用於Ajax對象的選項。

試試這個：

$("#txtPOI").autocomplete({ 
 
    source: function(request, response) { 
 
     $.ajax({ 
 
      url: '<?php echo site_url("crowd/get_POIs") ?>', 
 
      data: {cat: selectedCode, q: request.term}, 
 
      dataType: "json", 
 
      type: "post", 
 
      success: function(data) { 
 

 
       response($.map(data, function(item) 
 
       { 
 
        return{ 
 
          label: item.title, 
 
          value: item.title, 
 
          contentid: item.contentid, 
 
          latitude: item.latitude, 
 
          longitude: item.longitude 
 
         } 
 
       })); 
 

 
      }, 
 
      fail : function (jqXHR, textStatus, errorThrown) { 
 
       console.log(jqXHR); 
 
       console.log(textStatus); 
 
       console.log(errorThrown); 
 
      } 
 
     }); 
 
    }, 
 
    select: function(event) { 
 
     // do what ever you want to do... 
 
    } 
 
});