JQuery поиск строка за символом - PullRequest
2 голосов
/ 05 января 2011

надеюсь, что вы можете помочь,

Я пытаюсь создать «простой» тип автозаполнения / подсказки типа подсказки, основанный на значении поля ввода.

Пример: пользователь вводит «hello world» в поле ввода, и я хочу, чтобы change соответствовал символам, поскольку они набираются в списке (предопределенный), поэтому список может быть <ul> или <select> и т. Д.

Пробы. не нужно выходить за пределы первых 2 или 3 символов, на самом деле в действительности на данный момент подходит только первый - поэтому, например, «привет мир», список может содержать «привет мир, привет мир, мир помощи, мир, другой» мир, потому что мир .... "

Так что, если я введу h в качестве первой буквы в моем вводе, все, что я увижу в списке <ul> или <select> - будет помещено после поля ввода, поэтому можно использовать .next() is "hello world, hi world, help Мир".

Точно так же, если бы я напечатал a, я увидел бы "мир, другой мир". Надеюсь понятно? Проб. это не может найти какие-либо учебники там.

Заранее спасибо

Ответы [ 3 ]

3 голосов
/ 05 января 2011

Это совсем не сложно создать с нуля. Вот частичное решение, над которым я начал работать пару недель назад, добро пожаловать к нему:

Markup:

<input type="text" />
<div id="results">
    <ul>
        <li>Cartman</li>
        <li>Snooker</li>
        <li>Star Wars</li>
        <li>Blue Velvet</li>  
    </ul>
</div>

$(document).ready(function() {
    $("#results").hide();
    $("input").keyup(function() {
        if (this.value.length) {
            var that = this;
            $("#results li").hide().filter(function() {
                return $(this).html().toLowerCase().indexOf(that.value.toLowerCase()) !== -1;
            }).show();
            $("#results").show();
        } else {
            $("#results").hide();
        }
    });
});

Попробуйте здесь.

1 голос
/ 05 января 2011

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

Если вы нажмете «Просмотр источника» на этой конкретной демонстрации , она покажет, как можно выполнять фильтрацию с помощью Regexp и функции jQuery grep .

Это должно помочь вам начать; Осталось построить этот список из селектора jQuery на дочерних элементах <ul>.

0 голосов
/ 05 января 2011

Плагин jquery auto complete - это то, что вы ищете.

...