Chosen: Получить из удаленного источника данных

Созданный на 27 июл. 2011  ·  47Комментарии  ·  Источник: harvesthq/chosen

Есть ли пример кода, который показывает, как он работает с функцией автозаполнения пользовательского интерфейса jQuery? Если нет, можем ли мы получить это как запрос функции?

Feature Request

Самый полезный комментарий

@juanghurtado : если у меня есть поле с множественным выбором, содержащее 300 тысяч элементов, я не могу полностью записать его в html. Chosen предоставляет идеальный интерфейс для поиска и выбора. есть много других библиотек, предоставляющих эту функциональность, т.е. [1], [2] и многие другие. Из всего вышеперечисленного Chosen работает лучше всего, но он не поддерживает очень большие коллекции — это то, что добавила бы поддержка удаленного источника данных. Кроме того, если бы Chosen поддерживал это, это означало бы, что пришлось бы обновлять и обновлять один плагин вместо двух.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Все 47 Комментарий

Это немного лучше, чем автозаполнение jquery, не так ли? Хотелось бы со временем увидеть удаленные источники данных (возможность обратного вызова для результатов поиска)

Я третью эту просьбу. Было бы очень удобно иметь возможность указать удаленный источник, как функция автозаполнения пользовательского интерфейса jQuery.

Или, может быть, даже лучше: включить выбранное в пользовательский интерфейс jQuery. :)

+1

более конкретно, мой +1 за идею использования удаленного источника данных с вводом произвольного текста (например, использование вызовов ajax для помощи в тегировании)

Извините, я недостаточно ясно выразился, но первоначально я имел в виду интеграцию «удаленного источника данных», спасибо, что указали на это. Конечно, этот плагин намного лучше, чем функция автозаполнения jQuery. Как прокомментировал daFish, я хотел бы видеть это как часть пользовательского интерфейса jQuery.

+1 за поддержку удаленных источников данных

Я не понимаю. Chosen — это удобство использования и красота элементов SELECT , а не автозаполнение или выборка удаленных данных. Если вам нужны удаленные данные, соберите их и поместите в DOM перед вызовом Chosen…

@juanghurtado : если у меня есть поле с множественным выбором, содержащее 300 тысяч элементов, я не могу полностью записать его в html. Chosen предоставляет идеальный интерфейс для поиска и выбора. есть много других библиотек, предоставляющих эту функциональность, т.е. [1], [2] и многие другие. Из всего вышеперечисленного Chosen работает лучше всего, но он не поддерживает очень большие коллекции — это то, что добавила бы поддержка удаленного источника данных. Кроме того, если бы Chosen поддерживал это, это означало бы, что пришлось бы обновлять и обновлять один плагин вместо двух.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Что ж, если у вас есть 300 000 элементов в вашем элементе SELECT , (ИМХО) вы делаете что-то не так… Есть много вариантов, как лучше обрабатывать этот интерфейс.

Chosen может делать многое… Как взмах армейских ножей, он может делать много вещей (удаленные источники данных, привязка изображений к элементам, пользовательская фильтрация, запросы AJAX…) и перестает быть идеальным инструментом только для одного (лучший интерфейс для традиционных SELECT ).

El 08.10.2011, в 22:56, ivaynberg, запись:

@juanghurtado : если у меня есть поле с множественным выбором, содержащее 300 тысяч элементов, я не могу полностью записать его в html. Chosen предоставляет идеальный интерфейс для поиска и выбора. есть много других библиотек, предоставляющих эту функциональность, т.е. [1], [2] и многие другие. Из всего вышеперечисленного Chosen работает лучше всего, но он не поддерживает очень большие коллекции — это то, что добавила бы поддержка удаленного источника данных. Кроме того, если бы Chosen поддерживал это, это означало бы, что пришлось бы обновлять и обновлять один плагин вместо двух.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Ответьте на это письмо напрямую или просмотрите его на GitHub:
https://github.com/harvesthq/chosen/issues/79#issuecomment-1776643

с этим особо не поспоришь...

Я хочу получать удаленные данные при поиске из выбранного, например плагина автозаполнения jquery, пожалуйста, помогите мне

+1 за поддержку удаленных данных.

любой ваш пользовательский интерфейс хорош, но есть некоторые проблемы, например, отсутствие поддержки удаленных данных.

Я думаю, что это выполнимо, но не так просто, как может показаться. Поскольку это github с открытым исходным кодом, давайте посмотрим на код.

@juanghurtado Я также думаю, что мы можем сделать это, не раздувая существующую функциональность, и jquery, и прототип дают нам все необходимое для удаленных источников данных.

кажется, что results_search() срабатывает во время нажатия клавиш - именно здесь я бы переопределил выбранное поведение по умолчанию. Мне нужно копнуть немного глубже, но похоже, что если мы сможем имитировать winnow_results() и добавить способ отображения поведения загрузки (например, winnow_loading_results()), это может работать нормально.

Еще одна функция, на которую стоит обратить внимание, это winnow_results_clear();

Трудная часть — выяснить, как плавно интегрировать это в Избранного. Это должно быть в опциях? Должен ли это быть просто подкласс? И допустят ли это основные разработчики в главный проект?

На самом деле - мы должны закрыть этот вопрос, много работы делается над # 162, который, кажется, это все, что мы хотели.

Просто решил добавить, что в наше время эта функциональность просто необходима, и я очень надеюсь, что она скоро будет реализована. Во всех остальных отношениях выбрано идеально. :)

Что случилось с проблемой получения из удаленного источника данных?

Думаю, пора @pfiller присоединиться к разговору.

+1 хотелось бы увидеть это

Я загружаю удаленные значения сразу, когда страница обслуживается, поэтому, если я не могу обновить или получить новые данные, если бы я мог хотя бы добавить новые параметры для выбора, я мог бы поддерживать клиентскую сторону до тех пор, пока страница не будет обновлена. Так что +1 к удаленному извлечению и/или +1 к возможности добавления новых опций. Надеюсь, это имеет смысл...

+1 за запрос джалока

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

Кто-то реализовал это: https://github.com/meltingice/ajax-chosen

Я не гуру jQuery и ничего об этом не знаю. Так что, пожалуйста, простите мой невежественный способ объяснить вещи. Я действительно не могу подобрать нужных слов, чтобы описать мою проблему. Я просто следовал этой простой инструкции: добавил класс, поставил скрипт и вызвал функцию. Все работало отлично, кроме страницы, на которой не было выбора ввода. И я не уверен, что данные идут с помощью Ajax. Все, что я могу предположить, это то, что формы генерируются из таблицы базы данных MySQL. Выберите параметры ввода оттуда. По крайней мере, так выглядело, когда я редактировал страницу. Поэтому, когда я загружаю страницу, я вижу только класс «chzn-select» в моем вводе выбора, что означает, что скрипт вообще не работает. Читая связанные вопросы, я понял, что это из-за удаленного источника данных, но я не понимаю, как это исправить. На самом деле я не совсем понимаю, о чем вы тут говорите. Я пробовал Ajax-chosen, указанный выше, но безуспешно, и я пробовал другие «хаки», упомянутые здесь. Может кто-нибудь объяснить простыми словами, можно ли что-то сделать в моем случае или нет?

Я использую jQuery 1.4.2, пробовал как на Mac OS, так и на Windows. Вы можете проверить это здесь: http://94.125.8.168/eng/ (щелкните вкладку «Поиск» или «Расписание» в центральном блоке «Информация о рейсах»). Предполагается, что выбран пункт назначения, номер рейса и аэропорт.

@ffiona Вам нужно обернуть вызов Chosen в готовую функцию jQuery .

$(document).ready(function() {
  $(".chzn-select").chosen();
});

Пожалуйста, старайтесь задавать будущие вопросы по теме ветки. Если у вас есть вопрос, вы можете открыть новую тему.

@pfiller , это функция, над которой вы, ребята, работаете/будете работать? я пробовал все другие хаки, выбранные ajax, но ни один из них не работает. мне это действительно нужно, потому что я работаю над приложением для фондовой биржи, которое пользователь вводит в биржевые символы, которые, как вы знаете, могут иметь десятки тысяч из них.

@ все кажется, что мой вариант автоматического завершения ajax из выбранного будет долгим, и мне, возможно, придется искать альтернативы. кто-нибудь может порекомендовать какие-либо другие альтернативы выбранным с этой функцией?

Я также недавно создал его. https://github.com/ksykulev/chosen-ajax-addition

@ksykulev , у вас случайно нет живой демонстрации этого?

@jaequery
Просто быстро собрал пример http://sykulev.com/ajaxchosen/index.html

Я добавил код в /example в свой репозиторий.

@ksykulev : ваша версия отлично справляется с одиночным выбором, спасибо! Кстати, это не работает с мультиселектом. Я могу взглянуть на это, если у меня будет свободное время.

Версия @meltingice тоже делает очень странные вещи с множественным выбором, я думаю, это потому, что она вообще не использует функции Chosen (поэтому все вещи, которые естественным образом разрешены в исходной библиотеке, отсутствуют в версии ajax, например, изменение положения ввода и изменение размера после отправки результатов клиенту).

@jbbarth : Да, вы правы, я не тестировал его с множественным выбором, поэтому могу только предположить, что он работает не очень хорошо. Что касается полноты моей библиотеки, я определенно могу добавить поддержку для них. Я займусь этим. Спасибо!

В итоге я выпустил свою собственную версию с внешним видом, основанным на Chosen.

https://github.com/ivaynberg/select2

он поддерживает удаленные наборы данных ajax/jsonp и бесконечную прокрутку (ленивая загрузка постраничных удаленных наборов данных). хотя пока нет поддержки множественного выбора.

@ivanberg Я все смотрю на это.

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

Мне нравится внешний вид Chosen, но реализация оставляет желать лучшего.

Очень, очень красивая работа!

@ivanberg Я заметил, что у вас все еще есть код из selected, который специально вычисляет ширину раскрывающегося списка и ширины ввода поиска.

Вы можете проверить это: https://github.com/harvesthq/chosen/pull/407

Недавно я обновил выбранную версию ajax для поддержки множественного выбора. http://sykulev.com/ajaxchosen/index.html

Мастер @justindujardin Select2 теперь имеет паритет функций. я посмотрю на размеры в 407, но мы должны продолжить обсуждение проекта Select2.

Я чертовски люблю Select2 и рекомендую ВСЕМ перейти на него. Хе.

@ProLoser - спасибо за это ... именно то, что я искал. Похоже, гораздо лучший вариант.

Выберите2 FTW!

Select2 - это путь!

Какие-нибудь обновления после стольких лет?

Почему отсутствует такая функция чертенка?

хм... воняет. Я решил внедрить Chosen из-за выделения текста, но не знал, что добавить AJAX будет так сложно. Я предполагаю, что я должен был пойти с select2, если все прыгают с корабля, чтобы перейти к этому, как к способу удовлетворения требований. :(

Это отличная функция. Многие форки предлагают эту функцию, но реализация часто хаотична. :+1:

Я придумал простое решение для исправления обезьяны:

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

Вы можете предоставить опцию функции «источник» для выбранного, которая будет вызываться при рендеринге результатов. Он будет иметь строковое входное значение и аргументы функции обратного вызова. Функция обратного вызова выдает предложения. Если результаты не должны были измениться, то вы должны вызвать его немедленно без аргументов, иначе вы можете запросить результаты и отправить их в обратный вызов, когда они у вас есть. Объект результатов имеет следующий формат: { value: "label", value2: "label2" } . Вот пример:

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

То, что предлагает @faucct , кажется, работает. Небольшое замечание: если вы используете версию jquery, вы не сможете получить доступ к AbstractChosen за пределами выбранной области, поэтому вы, вероятно, захотите добавить эти файлы во внутреннюю выбранную область или вам нужно будет изменить выбранный файл js и переместите AbstractChosen и SelectParser в глобальную область. Другая проблема заключается в том, что он обновляет открытый список (выбранный div создает), но не обновляет фактическое «поле выбора», поэтому выбранная вами опция, если она не существует в выборе, может вызвать ошибку. Следует также отметить, что написанная вами строка также используется для фильтрации результатов, которые вы возвращаете. Также он работает каждый раз, когда вы что-то печатаете, поэтому у вас есть контроль вручную, чтобы не совершать звонки.

Я нашел другое расширение: https://github.com/meltingice/ajax-chosen

Он работает довольно хорошо, но текущая версия сломана, вам нужно внести некоторые незначительные изменения. Вы должны заменить «chzn» на «chosen», так как выбранная библиотека изменила свои внутренние имена css. Последнее изменение, которое вам нужно сделать, это активировать « selected: updated » вместо « listz:updated ». В ридми вас просят исправить ошибку в css, но она уже исправлена ​​в более новых версиях, поэтому вам не нужно этого делать. Вы также можете установить некоторые полезные параметры, и если пользователь продолжает писать, система также отменяет ожидающие вызовы.

Это было мое путешествие :), надеюсь, что это поможет.

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

выбранный удаленный источник (https://github.com/westonganger/chosen-remote-source)

Весь код довольно прост и содержит менее 200 строк кода.
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

Единственная часть Избранного, которую требовалось исправить, заключалась в следующем:

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH
Была ли эта страница полезной?
0 / 5 - 0 рейтинги