JQuery autocomplete - как добавить событие click к списку

Question

HI Я использую приведенный ниже код для популяции моего списка автозаполнения.

$('#input').autocomplete({ ajax_get : get_roles}); 

    function get_roles(v,cont,roleName){ 
      var roleName = roleName.value; 
      roleName = roleName.toLowerCase(); 
      $.get('/da/roleautocomplete?roleName='+escape(roleName),{q:v}, 
       function(obj){ 
        var res = []; 
        for(var i=0;i<obj.length;i++){ 
        res.push({ id:i , value:obj[i]}); 
        } 
        cont(res); 
       }, 
       'json') 
     } 

Я хочу запустить событие при щелчке или выборе элемента из списка автозаполнения. Я пробовал это -

$('#input').autocomplete({ 
    select:function(event, ui){ 
      // do your things here 
     }, etc. 

но безрезультатно. Может кто-нибудь, пожалуйста, помогите мне с этим?

Answer 1

У меня была аналогичная проблема, когда первый пытается использовать select:function(event,ui){ ... }, но это, безусловно, путь.

Ключом является использование ui.item, чтобы получить опцию, которая была нажата или выбрана иным образом. Я изначально использовал event, а затем this, но они отличаются для кликов и выбора клавиш (посмотрите на console.log для некоторой перспективы), поэтому ui.item - это то, что вы хотите. Автозаполнение будет устанавливать label: ..., value: ..., поэтому, скорее всего, вы будете использовать ui.item.label и ui.item.value.

Answer 2

Хийя демоhttp://jsfiddle.net/DMDHC/

Пожалуйста, убедитесь, что вы улучшить свою скорость приема :))

полезное чтение: [ссылка] http://jqueryui.com/demos/autocomplete/ (вы можете прочитать о возможностях и доступных событий и т.д.)

D'uh, очевидно, напоминание, чтобы не забыть, что принимаю &, если вы сочтете это полезным!

Код

$("#search").autocomplete({ 
    source: function(req, resp) { 
     $.post("/echo/json/", { 
      json: '["Rambo", "Foobar", "This", "That", "Batman", "Hulk"]', 
      delay: 1 
     }, function(data) { 
      resp(data); 
     }, "JSON"); 
    }, 
     select: function(event, ui) { 

      var TABKEY = 9; 
      this.value = ui.item.value; 

      if (event.keyCode == TABKEY) { 
       event.preventDefault(); 
       this.value = this.value + " "; 
       $('#search').focus(); 
      } 

      return false; 
     } 
}); 

​