jquery ui autocomplete仅显示db中的第一项

时间:2015-06-01 09:46:09

标签: javascript jquery jquery-ui spring-mvc autocomplete

我在模板上使用JQuery Autocomplete,但是当我得到结果时,自动完成仅显示一个项目,尽管获取的结果包含更多的项目。它只显示列表中的第一项!

示例:

如果我有('type1', 'type2', 'type3')

的结果列表

并在自动填充中输入't',它只会在下拉列表中显示type1

我是jquery的新手,好好纠正我的错误(如果有的话)

我的自动填充代码:

$(".fro").each(function() {
        $(this).autocomplete({
                source : function(request, response) {
                    $.ajax({
                    serviceUrl: '${pageContext.request.contextPath}/index.htm',
                    datatype: "json",
                    paramName: "fro",
                    delimiter: ",",
                    data : {
                        term : request.term
                    },      
                    success : function(data) {
                        response($.map(data.result, function(item) {
                            $.each(data, function() {
                                return {

                                       label : this.fro,
                                       value : this.fro
                               }
                            });
                        }));
                    }     
                });
            },
                minLength:1
            });
        });

enter image description here

我的响应控制器如下所示:

@RequestMapping(value = "/getTags.htm", method = RequestMethod.GET, headers="Accept=*/*")
      public @ResponseBody List<SearchFiller> getTags(@RequestParam("fro") String fro) {
          return simulateSearchResult(fro);
      }

      private List<SearchFiller> simulateSearchResult(String fro) {

        List<SearchFiller> data=searchFlightDao.fillerList();

        List<SearchFiller> result = new ArrayList<SearchFiller>();
            for (SearchFiller tag : data) {
                if (tag.getFro().contains(fro)) {
                    result.add(tag);
                }
            }

        return result;
      }

正确的答案得到赞赏

1 个答案:

答案 0 :(得分:0)

试试这个:

$(".fro").each(function() {
    $(this).autocomplete({
        source : function(request, response) {
            $.ajax({
                serviceUrl: '${pageContext.request.contextPath}/index.htm',
                datatype: "json",
                paramName: "fro",
                delimiter: ",",
                data : {
                    term : request.term
                },      
                success : function(data) {
                    dataArray = new Array();
                    $.each(data, function() {
                        var t = { label : this.fro,  value : this.fro };
                        dataArray.push(t);
                    });
                    response(dataArray);
                }
            });
        },
        minLength:1
    });
});