如何使用jQuery对元素中的文本进行不区分大小写的搜索

Question

我有以下基本布局：

<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>元素将包含html，如图像、链接、段落等。当找到匹配时，它返回<li> is，例如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
        }
    }
)}

做这件事最好的方法是什么。我以各种方式查看了contains、filter、循环所有.li元素，但到目前为止没有任何进展。任何帮助都将不胜感激。

Answer 1

这个怎么样？

为测试目的更改了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(函数(){)

$('#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);
            }
        }
    }
});

})；