Автозаполнение Jquery для формы ввода, используя список категорий Textpattern в качестве источника

Question

Я использую Textpattern CMS для создания дискуссионного сайта. Я хорошо разбираюсь в XHTML и CSS, а также язык шаблонов Textpattern, но PHP и Javascript немного превзошли мои ожидания.

В форме ввода, чтобы начать новую тему, пользователям необходимо выбрать категорию из списка более 5000 вариантов. Использование HTML-элемента select -type input очень громоздко, но работает. Я бы хотел использовать магию Javascript для отображения элемента ввода text -type , который будет читать ввод пользователя и отображать совпадения или автозаполнение из доступных категорий , передав значение требуемой опции в соответствующее поле базы данных.

Я видел несколько плагинов автозаполнения для jquery, но инструкции предполагают, что вы понимаете, как работает Javascript.

Как я упоминал выше, мне легко создать список категорий в виде элемента select -type input , и я могу скрыть этот элемент с помощью CSS. Можно ли управлять вводом списка выбора с помощью механизма автозаполнения в элементе ввода типа text ? Как бы я это сделал?

Answer 1

Вы можете настроить автозаполнение так, чтобы оно получало данные из URL-адреса, поэтому я вижу, что это используется в Textpattern несколькими изящными способами.

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

["example_one", "example_two", ... ]

Поскольку у вас более 5000 элементов, вам может потребоваться создать страницу, в которой они будут просто перечислены в этом формате:

Page Autocomplete:
[
    <txp:article_custom form="array_form" ... />
]

Form array_form:
"<txp:title />",

Чтобы использовать эту страницу вместо того, чтобы включать все элементы в поле выбора, вы должны настроить автозаполнение с помощью:

$("#example").autocomplete("<txp:link_to_home />Autocomplete");

Вы можете использовать плагин кэширования для ускорения загрузки.

Чтобы еще больше ускорить процесс, вы можете использовать функцию поиска Textpattern с пользовательской страницей отображения Вместо использования полного списка. Может быть способ настроить автозаполнение, чтобы при вводе / удалении нового символа автозаполнение перезагружалось с новой строкой поиска.

Answer 2

РЕДАКТИРОВАТЬ: Обновлено, чтобы поместить option.value в скрытое поле

Да, это возможно. Например, если у вас есть следующий HTML-код:

<input type="text" id="myTextBoxId"></input>
<!-- added hidden field to store selection option value -->
<input type="hidden" id="myHiddenField" name="selectedCategory"></input>
<select id="mySelectId" style="display: none">
    <option>Category 1</option>
    <option>Category 2</option>
    <option>...</option>
</select>

Вы можете использовать следующий код jquery для помещения этих данных в массив:

var categories = $.map($("#mySelectId option"), function(e, i)
{
    return e; // Updated, return the full option instead its text
});

И, наконец, вы можете использовать плагин автозаполнения, например этот

$("#myTextBoxId").autocomplete(categories,
{
    formatItem : function(item) { return item.text; } // Added
});

Посетите демонстрационную страницу плагина автозаполнения , чтобы узнать, что параметры , которые вы можете использовать (например, autoFill и mustMatch).

Все, что вам нужно сделать, это вставить это в заголовок html (jquery js, автозаполнение css & amp; js, код для вашей страницы):

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js">
</script>
<script type="text/javascript">
    $(function()
    {
        // Updated script
        var categories = $.map($("#mySelectId option"),
            function(e, i) { return e; });
        $("#myTextBoxId").autocomplete(categories,
        {
            formatItem : function(item) { return item.text; }
        });
        // Added to fill hidden field with option value
        $("#myTextBoxId").result(function(event, item, formatted)
        {
            $("#myHiddenField").val(item.value);
        }
    });
</script>

Хорошо, это всего лишь несколько строк кода, но мне не очень нравится " выделять в массив " вещи. Если возможно, вы должны создать страницу, которая возвращает список категорий, соответствующих вводу пользователя (опять же, посмотрите демонстрационную страницу для примеров, к сожалению, я не могу вам сильно помочь с Textpattern).

Конечно, я не проверял, просто оставьте комментарий, если у вас есть вопрос. РЕДАКТИРОВАТЬ: Я сделал тест, но не с 5k элементов в моем select ;)