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

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

1 голос
/ 04 марта 2009

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

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

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

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

Ответы [ 2 ]

4 голосов
/ 04 марта 2009

РЕДАКТИРОВАТЬ: Обновлено, чтобы поместить 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 & 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>

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

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

1 голос
/ 20 июня 2009

Вы можете настроить автозаполнение так, чтобы оно получало данные из 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 с пользовательской страницей вместо использования полного списка. Может быть способ настроить автозаполнение, чтобы при вводе / удалении нового символа автозаполнение перезагружалось с новой строкой поиска.

...