Примените один и тот же набор методов и кода jQuery к нескольким элементам

Question

У меня есть этот код, он прекрасно работает, но только первая функция.Я знаю, что этот код js очень старый, но я использую его для изучения.

Пример: https://jsfiddle.net/ieaccunt/gnfutye2/16/

Это функция поиска в реальном времени, и она отлично работает, но ТОЛЬКО в первом поле ввода.Я только что скопировал ту же функцию и попытался подключить 2-е поле ввода.но это не работаетЯ хотел бы применить тот же код еще 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>

Может ли кто-нибудь научить меня, почему после 1-й функции не 'т работа.Я попробовал каждый входной файл как независимый идентификатор и переменную ...

Answer 1

Используйте jQuery.fn.extend(), чтобы расширить jQuery с помощью пользовательских методов, которые вы затем примените к родительскому элементу и дочерним элементам в этом элементе.

см. https://api.jquery.com/jquery.fn.extend/ для получения более подробной информации

Это всего лишь пример и руководство по настройке кода, но неполное из-за неполного примера в вашем вопросе.Кроме того, имейте в виду, чтобы иметь только уникальные идентификаторы 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>

Answer 2

Атрибут ID одинаков для обоих полей ввода в вашем коде.(Из JSFiddle).Каждый элемент должен иметь уникальный идентификатор.

Если вы хотите искать, используя два входных значения и хотите использовать существующую функцию, попробуйте это:

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