JQuery UI автозаполнение

Question

Мне нужна помощь с кодом ниже.

$("#auto_cp").autocomplete({ 
    minLength: 3, 
    //source 
    source: function(req, add) { 
     $.getJSON("friends.php?callback=?", req, function(data) { 
      var suggestions = []; 
      $.each(data, function(i, val) { 
       suggestions.push(val.name); 
      }); 
      add(suggestions); 
     }); 
    }, 
    //select 
    select: function(e, ui) { 
     alert(ui.item.value); 
    } 
});​ 

с помощью FireBug, я получаю это в моей консоли:

jQuery171003666625335785867_1337116004522 ([{ "Имя": "97300 Cayenne", "ZZZ": "203"}, {» имя ":" 97311 Roura "," zzz ":" 201 "}, {" name ":" 97312 Saint Elie "," zzz ":" 388 "}, {" name ":" 97320 Saint Laurent du Maroni "," zzz ":" 391 "}, {" name ":" 97351 Matoury "," zzz ":" 52 "}, {" name ":" 97354 Remire MontJoly Cayenne "," zzz ":" 69 "}, {" name ":" 97355 Macouria Tonate "," zzz ":" 449 "}])

Все работает очень хорошо, но я не знаю, как получить значение «zzz» для выбранного элемента.

Я попытался

alert(ui.item.zzz); 

Но это не работает.

Answer 1

Функция источника - это только заполнение имени. Если вы хотите все от этой структуры данных, сделайте следующее:

$("#auto_cp").autocomplete({ 
    minLength: 3, 
    //source 
    source: function(req, add) { 
     $.getJSON("friends.php?callback=?", req, function(data) { 
      var suggestions = []; 
      $.each(data, function(i, val) { 
       suggestions.push(val); //not val.name 
      }); 
      add(suggestions); 
     }); 
    }, 
    //select 
    select: function(e, ui) { 
     alert(ui.item.value.zzz); 
    } 
});​ 

Answer 2

Это, как представляется, массив объектов ... что ваш может отсутствовать является «[0]» или вообще «[индекс]» ,

Пожалуйста, проверьте это: jqueryui.com/demos/autocomplete/#event-select

Answer 3

автозаполнения виджет ожидает источник данных в виде массива с либо:

• Объектов, содержащими меток свойства, значения свойство а, или оба
• Простые значения строк

Вы в настоящее время создания второго (массив строковых значений), которая работает хорошо, но вы также можете немного подправить ваши данные, как вы итерацию над ней, а также предоставить другие свойства в объекте:

$("#auto_cp").autocomplete({ 
    minLength: 3, 
    //source 
    source: function(req, add) { 
     $.getJSON("friends.php?callback=?", req, function(data) { 
      var suggestions = []; 
      $.each(data, function(i, val) { 
       suggestions.push({ 
        label: val.name, 
        zzz: val.zzz 
       }); 
      }); 
      add(suggestions); 
     }); 
    }, 
    //select 
    select: function(e, ui) { 
     alert(ui.item.zzz); 
    } 
});​ 

Теперь, поскольку массив, который вы снабжаете виджетами, содержит объекты с именем с именем, вы должны получить функциональность автозаполнения, а также получить доступ к свойству zzz.

Вот рабочий пример (без вызова AJAX): http://jsfiddle.net/LY42X/