Question

我有这段代码，它很好用，但只有第一个功能。我知道这个js代码很旧，但是我将其用于研究。

样本： https://jsfiddle.net/ieaccunt/gnfutye2/16/

这是实时搜索功能，可以正常工作，但仅在第一个输入字段上有效。我刚刚复制了相同的功能，并尝试连接第二个输入字段。但这不起作用。我想将相同的代码再5次应用于其他元素。

我这样写了第二个输入字段

我已经准备了独立的JSON和JS文件。我确实知道它确实很糟糕而且不聪明，但是现在我想使用它。

这是我的html示例

<div>
<div class="btn-group">
<input type="text" name="search2" id="search2" placeholder="input 2" class="form-control" size="3000" onkeypress="return event.keyCode!=13" />
<span class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
<ul class="list-group" id="result2"></ul>
</div>
</div>
</div>

有人可以教我为什么第一次功能后不起作用。我尝试将每个输入作为独立的ID和变量进行归档...

Answer 1

代码中两个输入字段的ID属性都是相同的。（来自JSFiddle）。每个元素必须具有唯一的ID。

如果要使用两个输入值进行搜索并想使用现有功能，请尝试以下操作：

$('#search1 #search2').keyup(function(){
$('#result').html('');
$('#state').val('');

var searchField1 = $('#search-1').val();
var searchField2=$('#search-2').val();

var expression1 = new RegExp(searchField1, "i");
var expression2 = new RegExp(searchField2, "i");
$.getJSON('js/data.json', function(data) {
$.each(data, function(key, value){
if (value.name.search(expression) != -1 || value.location.search(expression) != -1 || value.name.search(expression2) != -1 || value.location.search(expression2) != -1)
{

$('#result').append(
'<li class="list-group-item link-class"' +
' data-name="' + value.name + '"' + 
' data-code="' + value.code + '"' + 
' data-location="' + value.location + '"' + 
' data-image="' + value.image + '"' + 
'>'+value.name+'</li>');
}
});
});

Answer 2

使用jQuery.fn.extend()用自定义方法扩展jQuery，然后将其应用于父元素和该元素中的子元素。

请参阅：https://api.jquery.com/jquery.fn.extend/了解更多详细信息

这只是一个示例和指导，说明如何调整您的代码，但由于您的问题中示例不完整，因此不完整。另外，请记住只有唯一的ID html属性，但是如果需要重复元素，请使用css类。

jQuery.fn.extend({
    searchAndDisplay: function () {

        return this.each(function () {
            var searchWrapper = $(this);
            $.ajaxSetup({cache: false});
            searchWrapper.find('.search').keyup(function () {
         
                searchWrapper.find('.result').html('');
                //  searchWrapper.find('.state').val(''); //not sure what is this, since it is not provided in sample
                var searchField = searchWrapper.find('.search').val();
                var expression = new RegExp(searchField, "i");
                $.getJSON('js/data.json', function (data) {
                    $.each(data, function (key, value) {
                        if (value.name.search(expression) != -1 || value.location.search(expression) != -1) {

                            searchWrapper.find('.result').append(
                                '<li class="list-group-item link-class"' +
                                ' data-name="' + value.name + '"' +
                                ' data-code="' + value.code + '"' +
                                ' data-location="' + value.location + '"' +
                                ' data-image="' + value.image + '"' +
                                '>' + value.name + '</li>');
                        }
                    });
                });
            });

            searchWrapper.find('.result').on('click', 'li', function () {
                var name = $(this).data('name');
                var code = $(this).data('code');
                var location = $(this).data('location');


                var click_text = $(this).text().split('|');
                searchWrapper.find('.search').val($.trim(click_text[0]));

                searchWrapper.find('.search').attr('readonly', true);


                $(".result").html('');


                searchWrapper.find('.result').after('<input type="hidden" name="name" value="' + name + '">');
                searchWrapper.find('.result').after('<input type="hidden" name="code" value="' + code + '">');
                searchWrapper.find('.result').after('<input type="hidden" name="location" value="' + location + '">');


            });

        });
    }
});

$(document).ready(function () {
   //then apply same method on each element
    $("#searchComponent-1").searchAndDisplay(); 
    $("#searchComponent-2").searchAndDisplay();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="searchComponent-1">

    <div class="btn-group">
        <input type="text" name="search" placeholder="input 1" class="search form-control" size="3000"
               onkeypress="return event.keyCode!=13"/>
        <span class="searchclear glyphicon glyphicon-remove-circle"></span>
    </div>

    <ul class="list-group result"></ul>
</div>

<div id="searchComponent-2">

    <div class="btn-group">
        <input type="text" name="search" placeholder="input 2" class="search form-control" size="3000"
               onkeypress="return event.keyCode!=13"/>
        <span class="searchclear glyphicon glyphicon-remove-circle"></span>
    </div>

    <ul class="list-group result"></ul>
</div>

将同一组jQuery方法和代码应用于多个元素

2 个答案: