Как получить автозаполнение jquery из двух столбцов? - PullRequest
Новая
       7

Как получить автозаполнение jquery из двух столбцов?

6 голосов
/ 24 сентября 2011

У меня есть два списка вещей, которые я хочу найти для автозаполнения на моем сайте. Один - это список магазинов, а другой - список запросов, которые другие люди делали для продуктов. Я хотел бы, чтобы автозаполнение отображало два столбца, один столбец для первого набора поиска и другой столбец для другого набора поиска.

Например, кто-то, кто ищет обувь, должен видеть в левом списке слова «обувь для обуви, обувь без обуви, обувь для обуви и т. Д.», А затем во второй колонке «обувь, обувь, подставка для обуви, средство для чистки обуви и т.

Как я могу это сделать?

Ответы [ 3 ]

1 голос
/ 24 сентября 2011

Вы можете просто запустить поиск во втором входе (скрытый) ... вот что я собрал ( demo ):

HTML 

var stores = [
    'shoes',
    'shoes!',
    'shoebuy',
    'payless shoes',
    'shoemall',
    'shoes galore'
  ],
  searches = [
    'shoe',
    'shoes',
    'shoe rack',
    'shoe polish',
    'shoe horn'
  ],
  storeBox = $('#stores'),
  searchBox = $('#searches'),
  closeDropdowns = function() {
    searchBox.autocomplete('close');
    storeBox.autocomplete('close');
  };

storeBox.autocomplete({
  source: stores,
  search: function(event, ui) {
    // initiate search in second autocomplete with the same value
    searchBox.autocomplete('search', this.value);
  },
  select: function() {
    closeDropdowns();
  },
  close: function() {
    closeDropdowns();
  }
});

searchBox.autocomplete({
  source: searches,
  select: function(event, ui) {
    storeBox.val(ui.item.value);
    searchBox.autocomplete('close');
    storeBox.autocomplete('close');
  },
  close: function() {
    closeDropdowns();
  }
});
1 голос
/ 24 сентября 2011

У меня немного другая идея, я не могу потрудиться написать код прямо сейчас (с 2 часов ночи), но я не смогу дать вам концепцию:

(я предполагаю, что вы используете JqueryUI.autocomplete)

так что вам нужно перехватить событие create (посмотрите на документацию раздела категорий в автозаполнении JqueryUI, чтобы выяснить это).

Таким образом, при создании события вы хотите добавить два элемента div внутри элемента div, который представляет собой панель автозаполнения / окно / что угодно, и плавать их с шириной: 50% ;. затем, когда вы получаете значения (через ajax), проверьте «категорию» (то есть listLeft или listRight) и затем используйте .append, чтобы добавить к каждому списку соответственно, и убедитесь, что вы даете им класс autocompleteButton или как там его вызывали. *

графическое представление:

enter image description here

1 голос
/ 24 сентября 2011

Я сомневаюсь, что нечто подобное уже существует. Что вы можете сделать, это создать макет с двумя столбцами CSS внутри div, который отображается под текстовым полем при каждом его изменении. Таким образом, вы можете заполнить каждый столбец индивидуально, даже используя один и тот же запрос AJAX: 

<input id="autocompleteField" type="text" />
<div class="autocomplete">
<div class="autoLeft"></div>
<div class="autoRight"></div>
</div>

$("#autocompleteField").change(function () {
  $.get("url", $(this).val(), function(response) {
    $(".autoLeft").html(response.left);
    $(".autoRight").html(response.right);
  }, "json");
});
...