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

您总是可以自己构建它：一般的想法是保持您希望自动完成的所有数据显示在＆lt; ul＆gt;并隐藏＆lt; li>与您输入的内容不匹配的元素。在那之后，你需要的只是一些定位和造型而且瞧！

以下是我撰写的网页示例。

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

具有一个功能的页面上有多个自动完成功能？

1 个答案: