自动填充仅显示消息N结果可用,使用向上和向下箭头键进行导航。而是显示列表

时间:2013-07-02 07:58:25

标签: ajax json jquery-ui autocomplete

我的问题很清楚。

我正在使用jquery自动完成功能,我不知道为什么它只向我显示消息:

9 results are available, use up and down arrow keys to navigate.

没有显示结果列表。

这是我的代码:

<p class="select-c">
     <label for="fcb">Location</label>
     <input id="fcb" name="fcb" type="text">                        
</p>


$("#fcb").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "GET",
                dataType: 'json',
                url: "../ws/city/" + request.term,
                async: true,
                success: function( data ) {
                    response( $.map( data, function( item,key ) {
                        return {
                            label: key,
                            value: item.id_town+"#"+item.id_province
                        }
                    }));
                },
                error: function (result) {
                    alert("Due to unexpected errors we were unable to load data");
                }
            });
        },
        minLength: 2
    });

结果如:

enter image description here

可能是什么问题?

3 个答案:

答案 0 :(得分:12)

只需检查您是否正在导入正确的css以更正列表呈现

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />

如果您还想删除该消息,请在源

之后添加以下条目
$("#fcb").autocomplete({
    //your source info
   messages: {
        noResults: '',
        results: function() {}
    }
});

答案 1 :(得分:10)

检查你的CSS,也许你正在隐藏菜单元素。试试:

.ui-autocomplete {
  z-index: 10000000;
}

答案 2 :(得分:8)

  .ui-helper-hidden-accessible {
            display: none;
        }