Как выполнить поиск текста внутри элементов без учета регистра, используя jQuery - PullRequest
Новая
       16

Как выполнить поиск текста внутри элементов без учета регистра, используя jQuery

0 голосов
/ 10 октября 2011

У меня есть следующая базовая раскладка: 

<div id="container">
    <div id="div-a">
        <ul id="ul-1">
            <li id="li-1-1" class="li"></li>
            <li id="li-1-2" class="li"></li>
        </ul>
    </div>
    <div id="div-b">
        <ul id="ul-2">
            <li id="li-2-2" class="li"></li>
        </ul>
    </div>
    <div id="div-c">
        <ul id="ul-3">
            <li id="li-3-1" class="li"></li>
            <li id="li-3-2" class="li"></li>
            <li id="li-3-3" class="li"></li>
            <li id="li-3-4" class="li"></li>
        </ul>
    </div>
</div>

Что я пытаюсь сделать, так это то, что когда поле ввода вводится, оно инициирует поиск элементов <li>. Он выполняет поиск без учета регистра по всему тексту, содержащемуся в элементах <li>. Элемент <li> будет содержать html, такой как абзацы с ссылками на изображения и т. Д. Когда совпадение найдено, он возвращает идентификаторы <li>, например, li-1-1,li-2-1 и т. Д. (Независимо от того, что является лучшей практикой). Все это происходит, пока я печатаю. Я планирую получить идентификаторы и клонировать <li>. Но это не должно быть важно на данном этапе.

Пока у меня есть следующее: 

$('#my-input').keyup(function(e) {
    e.stopImmediatePropagation();
    var keycode = ( e.keyCode ? e.keyCode : e.which );
    if( keycode == 13 ) {
        //Do something
    } else {
        if( $('#my-input').val().length >= 3 ) {

            //code goes here
        }
    }
)}

Как лучше всего это сделать. Я рассмотрел содержимое, фильтры, циклы по всем элементам .li различными способами и т. Д., Но пока мне не повезло. Любая помощь будет высоко ценится.

1 Ответ

3 голосов
/ 10 октября 2011

Как насчет этого?

HTML-часть изменена для целей тестирования: 

<input id="my-input"/>
<div id="container">
    <div id="div-a">
        <ul id="ul-1">
            <li id="li-1-1" class="li"><p>This is something wonderful</p></li>
            <li id="li-1-2" class="li"><span>Try is  out</span></li>
        </ul>
    </div>
    <div id="div-b">
        <ul id="ul-2">
            <li id="li-2-2" class="li"><a href="javascript: void(0)">This needs to be selected</a></li>
        </ul>
    </div>
    <div id="div-c">
        <ul id="ul-3">
            <li id="li-3-1" class="li">No that wonderful</li>
            <li id="li-3-2" class="li">How is this?</li>
            <li id="li-3-3" class="li">Need to match</li>
            <li id="li-3-4" class="li">No need to match?</li>
        </ul>
    </div>
</div>

JQuery / JavaScript

$ ("документ"). Ready (function () {

$('#my-input').keyup(function(e) {
    e.stopImmediatePropagation();
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == 13) {
        //Do something
    } else {
        var matchText = $('#my-input').val();
        if (matchText.length >= 3) {
            var selectedLists = new Array();
            var flagArray = new Array();
            var i = 0;
            $(matchText.split(/\s+/)).each(function() {
                var textToMatch = $(this)[0];
                if (textToMatch && textToMatch != "") {
                    $("li").each(function() {
                        if ($(this).html().match(eval("/" + textToMatch + "/ig"))) {
                            if (!flagArray[$(this).attr("id")]) {
                                selectedLists[i++] = $(this).attr("id"); //For your implementation, I suggest that you store the object, rather than the id so that you can clone it without an iteration
                                flagArray[$(this).attr("id")] = true;
                            }
                        }
                    });
                }
            });
            if (selectedLists.length > 0) {
                alert(selectedLists);
            }
        }
    }
});

}); * +1011 *

...