более одного автозаполнения на странице с одной функцией?

Question

есть ли способ иметь более одного текстового поля автозаполнения на странице, все с разными данными в выпадающем списке, но все используют одну функцию?то есть не повторять код ниже для каждого?

Я пытался использовать $(this) внутри $().autocomplete{}, но это не нравится.Я думал, что мог бы иметь скрытое поле с назначением контроллера, которое содержит все результаты.Это работает для всех, но каждый ввод имеет те же результаты, что и для класса.

ИЛИ есть ли лучший способ иметь несколько автозаполнений, каждый с разными выпадающими данными?

 $(".ac_input").autocomplete(


  base_url + $(".ac_input").siblings("input[name=goto]").val(),
  {
        delay:10,
        minChars:1,
        matchSubset:1,
        matchContains:1,
        cacheLength:10,
        onItemSelect:selectItem,
        onFindValue:findValue,
        formatItem:formatItem,
        autoFill:false,
        maxItemsToShow:10
    }

);

Answer 1

Вы всегда можете создать его самостоятельно: общая идея - сохранить все данные, которые вы хотите, чтобы автозаполнение отображало, в

• , которые не соответствуют введенному вами. После этого все, что вам нужно, это немного позиционирования, стиля и вуаля!

  Вот пример страницы, которую я написал.

  JS

  $(function(){
      //Enable the autocomplete
      autocomplete_handle('#search_username', '#autocomplete_container');
   });
  
      /**
       * Turns a input/li set to an autocomplete pack
       * The li must contain all the elements that should
       * be displayed by the autocomplete block
       */
      function autocomplete_handle(input_field, ul_field){
              $(input_field).keyup(function(){
                      var typed = $(this).val();
                      var matches = [];
                      var autocomplete = $(ul_field).children();
  
                      $(ul_field).show();
  
                      for(var i=0; i<autocomplete.length;i++){
  
                              if($('a',autocomplete[i]).text().indexOf(typed)==0){
                                      $(autocomplete[i]).show();
                              }else{
                                      $(autocomplete[i]).hide();
                              }
                      }
              });
  
      }
  

  PHP

  <ul id="autocomplete_container" style="display: none;" class="autocomplete">
  
                              <?php foreach($all_users->result() as $user):?>
  
                              <li style="display: none;">
                                      <a href="javascript:;"><?php echo $user->username;?></a>
                              </li>
                              <?php endforeach;?>
  </ul>
  

  CSS

  /* Styling for the autocomplete fields of the application*/
  input.autocomplete, ul.autocomplete{
      width: 150px;
  }
  
  ul.autocomplete{
      list-style: none;
      background-color: #fff;
      border: 1px #000 solid;
  }
  
  
  ul.autocomplete li{ 
      margin:0px 2px 0px 0px;
  }
  
  ul.autocomplete{
      padding: 2px 2px 2px 2px;
      margin: 0px 0px 0px 0px;
      position: absolute;
      cursor: default;
  }
  
  ul.autocomplete a{
      display: block;
      width: 100%;
      border: 1px solid #fff;
  }
  
  ul.autocomplete a:HOVER, ul.autocomplete a:FOCUS {
      background: #dddddd;
      border: 1px solid #000;
  
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
  }