하나의 기능이있는 페이지에 자동 완성이 두 개 이상 있습니까?

Question

페이지에 둘 이상의 자동 완성 텍스트 필드가있는 방법은 모두 드롭 다운의 데이터가 다르지만 모두 하나의 기능을 사용하고 있습니까? 즉 각각에 대해 아래 코드를 반복하지 않습니까?

나는 안에 $(this)을 사용해 보았지만 좋지 않습니다. 나는 모든 결과를 보유하고있는 컨트롤러 대상을 가진 숨겨진 필드를 가질 수 있다고 생각했습니다. 모두를 위해 작동하지만 각 입력은 클래스별로 작동하는 것과 동일한 결과를 얻습니다.

또는 다른 드롭 다운 데이터로 각각 여러 개의 자동 완성을 사용하는 것이 더 좋은 방법입니까?

$(".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

당신은 항상 스스로를 구축 할 수 있습니다 : 일반적인 아이디어는 < 리를 사용하면 자동 완성이 < UL에 표시 할 모든 데이터를 유지>를 숨기는 것입니다> 요소를 당신이했습니다 일치하지 않는 입력되었습니다. 그 후, 당신이 필요로하는 것은 포지셔닝과 스타일링과 짜잔입니다!

다음은 내가 작성한 페이지의 예입니다.

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