一页上有多个自动完成功能且具有一种功能？

Question

有没有一种方法可以在一页上拥有多个自动完成文本字段，所有下拉列表中都有不同的数据，但都使用一个功能？即不为每一个重复下面的代码？

我尝试在 $().autocomplete{} 中使用 $(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;
}