Настройка автозаполнения jQuery - PullRequest
Новая
       5

Настройка автозаполнения jQuery

1 голос
/ 22 декабря 2011

Я хочу сделать очень конкретные вещи с помощью jQuery и автозаполнения, и я не нашел адекватного ответа в Интернете.Моя первая проблема заключается в том, что все методы, которые я мог найти в Интернете, не работают (parse, formatItem и т. Д.).

Что странно, что автозаполнение отлично работает со следующим кодом, но игнорирует все другие методы «настройки» (parse, formatItem и т. д.). 

/* autocompletion */
$( '#metier' ).autocomplete({
  source: '/json/metiers/categories/mix/',
  minLength: 2,
  select: function(event, ui) {
    /* item look like '(XXXX) yyyy'
       => remove '(XXXX)' then forbid 
          autocomplete() to assign its own value
          via 'return false' :
    */
    var v=ui.item.value;
    $('#metier').val(v.substr(v.indexOf(') ')+1));
    return false;
  }
});

Вот что я вставил в <header>: я использую последние версиивсе, поэтому я не знаю, что с ним не так: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" media="screen" />

Вот что я сделал, и это работает:

  • добавить автозаполнение в поле ввода
  • когда выбор сделан, удалите (XXX) в начале выделения и заполните поле ввода тем, что осталось

Вот что я пытаюсь сделать:

  • добавить автозаполнение в поле ввода
  • при возврате AJAX, сохранить результирующий массив (который является JSON) в глобальной переменной (чтобы иметь возможность получить соответствующее поле (url на самом деле) позже
  • для каждой метки, которая будет отображаться в списке, создайтеПользовательский дисплей (в начале всегда есть (XXX), хотелось бы, чтобы он был цветным), и создайте пользовательский идентификатор (в зависимости от возврата AJAX).
  • , когда выбор сделан, удалите(XXX) в начале выделения и заполните поле ввода тем, что осталось, извлеките номер идентификатора из идентификатора выбора и сохраните соответствующее поле url, найденное в глобальном массиве, в глобальной переменной для последующего использования..

Я использую компонент автозаполнения jQuery, и вызов AJAX возвращает что-то вроде: 

[
    {
        "id":"229",
        "value":"(Category) General category of that stuff",
        "url":"//"
    },
    {
        "id":"240",
        "value":"(Category) General category of that stuff",
        "url":"/toto/detail/tata"
    },
    {
        "id":"3655",
        "value":"(Detail) Very detailed stuff",
        "url":"/toto/detail/tata"
    }
]

Я уже посмотрел:

Но ничто не могло мне помочь ...

1 Ответ

1 голос
/ 22 декабря 2011

На сайте пользовательского интерфейса jQuery есть учебное пособие по настройке отображения:

Чтобы выполнить пользовательское отображение элементов в раскрывающемся меню, он связывает вызов .data("autocomplete") после вызова .autocomplete и добавляет функцию _renderItem к извлекаемым данным.

Вот код для автоматической окраски предметов в паренсе:

http://jsfiddle.net/VnUv8/

.data("autocomplete")._renderItem = function(ul, item) {
    var v = item.value;
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(
            "<a>"
                + "<span class='hilightItem'>"
                    + v.substr(0, v.indexOf(') ') + 1)
                + "</span>"
                + " " + v.substr(v.indexOf(') ') + 2)
            + "</a>"
        )
        .appendTo(ul);
};
...