代码之家 › 专栏 › 技术社区 › Alex

jquery自动完成。不显示现有匹配项

autocomplete jquery javascript

Alex · 技术社区 · 14 年前

我遇到了一个我无法解决的问题。我正在使用 autocomplete 输入上的jquery插件。HTML如下所示:

<tr id="row_house" class="no-display">
        <td class="col_num">4</td>
        <td class="col_label">House Number</td>
        <td class="col_data">
            <input type="text" title="House Number" name="house" id="house"/>
            <button class="pretty_button ui-state-default ui-corner-all button-finish">Get house info</button>
        </td>
    </tr>

我确信这是唯一 id="house" 字段。在此之前的其他字段可以很好地使用自动完成功能,它基本上是相同的算法(其他变量、其他数据、其他调用)。为什么它不能像下面的init那样工作呢?代码:

$("#house").autocomplete(["1/4","6","6/1","6/4","8","8/1","8/5","10","10/1","10/3","10/4","12","12/1","12/5","12/6","14","14/1","15","15/1","15/2","15/4","15/5","16","16/1","16/2","16/21","16/2B","16/3","16/4","17","17/1","17/2","17/4","17/5","17/6","17/7","17/8","18","18/1","18/2","18/3","18/5","18/95","19","19/1","19/2","19/3","19/4","19/5","19/6","19/7","19/8","20","20/1","20/2","20/3","20/4","21","21/1","21/2","21/3","21/4","22","22/9","23","23/2","23/4","24","24/1","24/2","24/3","24/A","25","25/1","25/10","25/2","25/4","25/5","25/6","25/7","25/8","25/9","26","26/1","26/6","27","27/2","28","28/1","29","29/2","29/3","29/4","30","30/1","30/2","30/3","31","31/1","31/3","32/A","33","34","34/1","34/11","34/2","34/3","35","35/1","35/2","35/4","36","36/1","36/A","37","37/1","37/2","38","38/1","38/2","39/1","39/2","39/3","39/4","40","40/1","41","41/2","42","43","44","45","45/1","45/10","45/11","45/12","45/13","45/14","45/15","45/16","45/17","45/2","45/3","45/6","45/7","45/8","45/9","46","47","47/2","49","49/1","50","51","51/1","51/2","52","53","54","55/7","66","109","122","190/8","412"], {minChars:1, mustMatch:true}).result(function(event, result, formatted) {
                var found=false;
                for(var index=0; index<HChouses.length; index++) //HChouses is the same array used for init, but each entry is paired with a database ID.
                    if(HChouses[index][0]==result)
                    {
                        found=true;
                        HChouseId=HChouses[index][1];
                        $("#row_house .button-finish").click(function() {  
                            QueryServer("HouseConnect","FillData",true,HChouseId); //this performs an AJAX request
                        });
                        break;
                    }
                if(!found)
                    $("#row_house .button-finish").unbind("click");
            });

每次我开始输入(比如我按下“1”按钮),文本就会出现并立即被删除。在反复按了几次之后,我很少得到这个列表(尽管比它应该短得多)。 alt text http://www.freeimagehosting.net/uploads/de3892134d.jpg

但如果在那之后我按第二个数字,整个事情就会再次消失。另外,我使用火狐3.6.3进行开发。

1 回复 | 直到 14 年前

majackson 14 年前

似乎您要求的是使用自动完成功能的文本框,当选择某个值时,它将执行某些功能。( QueryServer 此处)使用所选值的ID。实际上,这是HTML的动态半官方版本 <select> . 如果那是错的,请纠正我。

我最近用jqueryui自动完成做了类似的事情。您在评论中提到,您尝试过这种方法,但我认为您对使用任何一个库的解决方案都感兴趣。我可以这样做:

$("house").autocomplete({
    source: [{'id': 1, 'value': '10/1'}, {'id': 2, 'value': '10/3'}, {'id': 3, 'value': '10/4'}, ....
    minLength: 1,
    select: function(event, ui) {
        //input will auto-populate with "value" part
        $("#row_house .button-finish").click(function() {  
            QueryServer("HouseConnect","FillData",true,ui.item.id);                           
        });
    },
    //this next function is a hack to replicate the "mustMatch" functionality of the bassistance autocomplete plugin
    change: function (event, ui) {
        var source = $(this).val();
        var found = $('.ui-autocomplete li').text().search(source);
        if(found < 0) { //no match!
           $(this).val('');
           $("#row_house .button-finish").unbind("click");
        }            
    }
});

你可能想申报 source 其他地方的价值观让它更整洁。

希望有帮助!