Блог

Это скрипт поиска в реальном времени. Livesearch работает нормально, но не может получить все данные массива. Я хотел бы получить данные ‘name’, ‘code’ и ‘location’ каждого поискового компонента.

Обновить

Вот весь код js.

https://jsfiddle.net/blueink/wyejqhsz/3/

У меня уже есть массив $data, поэтому я хотел бы добавить В него эти элементы.

 <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

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

Я предположил, что ваш dom будет иметь входные данные, подобные этому:

   <ul class="list-group result">
    <input type="hidden" name="name" value="Name2">
    <input type="hidden" name="code" value="Code2">
    <input type="hidden" name="location" value="Location2">
  </ul>
  

Вы можете сделать следующее, чтобы получить желаемый результат:

 $(document).ready(function() {
  var result_array = []
  $('.result').each(function() {
    var name = $(this).find("input[name='name']").val();
    var code = $(this).find("input[name='code']").val();
    var location = $(this).find("input[name='location']").val();
    result_array.push([name, code, location])
  });

  console.log('As Array:')
  console.log(result_array)

});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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">
    <input type="hidden" name="name" value="Name1">
    <input type="hidden" name="code" value="Code1">
    <input type="hidden" name="location" value="Location1">
  </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">
    <input type="hidden" name="name" value="Name2">
    <input type="hidden" name="code" value="Code2">
    <input type="hidden" name="location" value="Location2">
  </ul>
</div>  

Если вы хотите, чтобы ваш результат был в одномерном массиве, вы можете сделать:

 result_array.push(name, code, location)
  

Вывод будет:

 ["Name1", "Code1", "Location1", "Name2", "Code2", "Location2"]