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... 
 
    } 
 
});