Это позволяет пользователям выбирать категорию из выпадающего списка (что нормально); тем не менее, я бы хотел, чтобы пользователи видели стандартное текстовое поле, которое будет автоматически заполнять строку, которую вводят, с категориями из моей базы данных, когда они начинают ее вводить.
Функциональность очень похожа на поле "Теги", которое мы используем при публикации вопроса на Stack Overflow.
Как это лучше всего сделать с помощью приложения Phoenix? Я пробовал использовать автозаполнение jQuery; однако мне бы хотелось более "легкое" решение (которое не требует jQuery).
Любые идеи приветствуются. Спасибо за ваше время.
Я думаю, что любое решение будет так или иначе использовать JavaScript, поэтому отказ от использования JQuery или какой-либо подобной библиотеки JS оставляет вас с реализацией этого в чистом JS. По моему опыту, это обычно приводит к глючному, неинтуитивному виджету. Вам придется реализовать тривиальные вещи, такие как захват клавиатуры вверх/вниз/клавиши ввода с нуля. Shovalt 02.05.2016
Я дал решение с помощью purejavascript, и для доступа к базе данных вы должны просто отправить параметр в dabatase, из которого запросы для подстроки соответствуют столбцу тега. codefreaK 03.05.2016
Единственное решение, которое я могу придумать, вообще не используя JavaScript, - это список данных. Это отличный новый элемент HTML5, который делает именно то, что вам нужно, но его поддержка браузерами не очень хороша (обновление 2021: в настоящее время поддержка намного лучше).
Если вы хотите избежать JQuery, но по-прежнему можете использовать какой-либо другой виджет JS, вам следует взглянуть на Awesomplete. - сверхлегкий, настраиваемый, простой виджет автозаполнения без каких-либо зависимостей. Если вы включите минимальные файлы JS и CSS, они в сумме составят всего около 8 КБ. Это также смехотворно легко реализовать:
Решение на чистом ванильном javascript, совместимое со всеми платформами, поддерживающими javascript
В этом подходе текстовое поле прослушивается для нажатия клавиш, и каждый раз, когда происходит событие, вводимый текст сопоставляется с предопределенным набором ввода и, если он найден, добавляется к базовому тегу UL в качестве элементов li.
Здесь css для li берется из того, что отображается в хроме для текстового поля, его можно настроить по своему вкусу.
И что касается получения значений или тегов из части базы данных, это также не проблема, вы можете использовать ajax для получения значений, передавая входные данные в качестве параметра на сторону сервера и возвращая совпавшие теги и добавляя их.
// variables
var input = document.querySelector('input');
var people = ['john doe', 'maria', 'paul', 'george', 'jimmy','Andrew','Hendrie'];
var results;
// functions
function autocomplete(val) {
var people_return = [];
for (i = 0; i < people.length; i++) {
if (val === people[i].slice(0, val.length)) {
people_return.push(people[i]);
}
}
return people_return;
}
// events
input.onkeyup = function(e) {
input_val = this.value; // updates the variable on each ocurrence
if (input_val.length > 0) {
var people_to_show = [];
autocomplete_results = document.getElementById("autocomplete-results");
autocomplete_results.innerHTML = '';
people_to_show = autocomplete(input_val);
for (i = 0; i < people_to_show.length; i++) {
autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';
}
autocomplete_results.style.display = 'block';
} else {
people_to_show = [];
autocomplete_results.innerHTML = '';
}
}
