Question

我想实现一些功能，当我在

中输入一些文字时

<input path="tags" id="input-search"/>

应该会出现一个建议的标记列表

在进行ajax调用之后

。我有数据库查询

public interface TagRepository extends JpaRepository<Tag, Integer> {    
    @Query("SELECT t FROM Tag t WHERE name LIKE CONCAT('%', :name, '%')")
    List<Tag> findTagByName(@Param("name") String name);    
}

，控制器代码为

@RequestMapping(value = "/getTags", method = RequestMethod.POST, produces = "application/json")
    public  @ResponseBody List<Tag> getTags(@RequestBody Tag tag, HttpServletResponse response) {
        System.out.println("Found " + String.valueOf(tagService.findTagByName(tag.getName()).size()));
        return tagService.findTagByName(tag.getName());

    }

ajax的javascript是

 $(document).ready(function() {   
        $("#tag-search").autocomplete({
            source: function(request, response) {
                $.ajax({
                 url: "/app/getTags/", 
                 type: "POST", 
                 data: JSON.stringify({tag : request.term}),
                 dataType: "json",
                success: function(data) {
                    response($.map(data, function(v,i){
                        console.log();
                        return {
                            label: v.empName,
                            value: v.empName
                         };
                    }));
                }
               });              
            }   
        });
    });

<div class="col-md-10 col-md-push-1">                                                   
    <label class="floating-label" for="login-username">Tags</label>
    <form:input path="tags" cssClass="form-control" id="tag-search"/>
</div>

当我运行应用程序时，我在开发人员工具中看到了这个javaScript错误

重要

我正在使用Daemonite/material作为我的前端和前端jQuery-Autocomplete，最后一个好消息是App的最新版本是on GitHub 可以任何人告诉我如何摆脱错误欢迎任何回复。

Answer 1

检查jquery供应商库是否正确加载。

交叉检查：

<script>
if (window.jQuery) {  
    alert('jQuery is loaded');
} else {
    alert('jQuery is not loaded');
}
</script>

Answer 2

对于上述问题，我主要使用 select2 jquery plugin 。它具有很多内置功能，所以不需要重新发明轮子。查看此链接以获取演示 - http://select2.github.io/select2/#infinite

屏幕截图：

代码示例：

$("#e7").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 3,
    ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) { // page is the one-based page number tracked by Select2
            return {
                q: term, //search term
                page: page // page number
            };
        },
        results: function (data, page) {
            var more = (page * 30) < data.total_count; // whether or not there are more results available

            // notice we return the value of more so Select2 knows if more results can be loaded
            return { results: data.items, more: more };
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

现在布局与您提供的屏幕截图不完全相同，但请检查此布局是否适合您。

更新：

function repoFormatResult(repo) {
  var markup = '<div class="row-fluid">' +
     '<div class="span2"><img src="' + repo.owner.avatar_url + '" /></div>' +
     '<div class="span10">' +
        '<div class="row-fluid">' +
           '<div class="span6">' + repo.full_name + '</div>' +
           '<div class="span3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
           '<div class="span3"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
        '</div>';

  if (repo.description) {
     markup += '<div>' + repo.description + '</div>';
  }

  markup += '</div></div>';

  return markup;
}

function repoFormatSelection(repo) {
    return repo.full_name;
}

另一种方法：

如果上述解决方案不适合您的问题，那么您可以使用此解决方案。它被称为typeahead.js由twitter提供的JavaScript库。你可以找到例子here。

Answer 3

它只是意味着您在响应中获取HTML而不是JSON。

“ Unexpected＆lt; ”指的是您请求的响应的第一个字符。在Chrome控制台中，您可以转到网络选项卡并单击您的请求，然后在右侧查看您的服务器返回客户端的确切内容。

Answer 4

你错过了jquery.js。添加它，你就可以了。

Answer 5

我在这里添加代码，以便更好阅读;

在返回jquery之前编写一个新方法来解析Java端的json。当前代码返回Java列表作为Ajax的输出，这可能会抛出未捕获的语法错误：意外的令牌。

     public static String toJSON(Object object) 
      { 
          if ( object == null ){
          return "{}"; 
          } 
          try { 
             ObjectMapper mapper = new ObjectMapper(); 
             return mapper.writeValueAsString(object); 
             } 
          catch (Exception e) { 
           e.printStackTrace(); 
          } 
        return "{}"; 
        }

对于上面的代码，您需要包含3个jars jackson-core-2.2.3.jar，jackson-annotations-2.2.3.jar和jackson-databind-2.2.3.jar。

将控制器更改为以下内容;

@RequestMapping(value = "/getTags", method = RequestMethod.POST, produces = "application/json")
    public  @ResponseBody String getTags(@RequestBody Tag tag, HttpServletResponse response) {
        System.out.println("Found " + String.valueOf(tagService.findTagByName(tag.getName()).size()));
        return toJSON(tagService.findTagByName(tag.getName()));

    }
$(document).ready(function() { 
        var autoCompleteResult = '';  
        $("#tag-search").autocomplete({
            source: function(request, response) {
                $.ajax({
                 url: "/app/getTags/", 
                 type: "POST", 
                 data: JSON.stringify({tag : request.term}),
                 dataType: "json",
                success: function(data) {
                    autoCompleteResult = jQuery.parseJSON(data);
                    response($.map(autoCompleteResult, function(v,i){
                        console.log();
                        return {
                            label: v.empName,
                            value: v.empName
                         };
                    }));
                }
               });              
            }   
        });
    });

请在尝试后分享您的搜索结果。

Answer 6

试试这个： https://github.com/tanwaniniranjan/autosuggest 它是为同一目的而制作的插件。文档很少，但我希望尽快提供文档。

Yu可以阅读js文件中的注释，以了解用法

编辑：我现在更仔细地阅读你的问题，发生的事情是：您从服务器端获得的响应是错误的。错误通常会开始像对不起兄弟，404

因为你试图映射数据，jQuery只是无法解析它，它会给你错误。首先检查你的服务器端。使用postman插件发出请求，验证您的响应，然后实现jQuery：https://chrome.google.com/webstore/detail/postman-launcher/igofndmniooofoabmmpfonmdnhgchoka?hl=en

Answer 7

正如我所看到的500 internal server error可能存在问题，因为你的ajax中有一个dataType: "json",，而你的控制器却没有返回任何json。

@RequestMapping(value = "/getTags", method = RequestMethod.POST, produces = "application/json")
public  @ResponseBody List<Tag> getTags(@RequestBody Tag tag, HttpServletResponse response) {
    System.out.println("Found " + String.valueOf(tagService.findTagByName(tag.getName()).size()));
    return tagService.findTagByName(tag.getName());

}

此处为您的控制者：produces = "application/json"表示它将返回json作为输出，并且：return tagService.findTagByName(tag.getName());您可以生成任何json。

Answer 8

只需将以下标记添加到您的ajax调用

即可

     contentType: 'application/json; charset=utf-8',

这是请求数据的类型，在您的情况下，它只是您在文本框中键入的文本格式

如果您的响应数据不是json类型
，请从您的ajax调用中删除以下行

dataType: 'json', 这可能会删除代码中的Json解析错误

Answer 9

按以下方式更改您的JavaScript

$(document).ready(function() {   
    $("#tag-search").autocomplete({
        source: function(request, response) {
            $.ajax({
             contentType: 'application/json; charset=utf-8',
             url: "/app/getTags/", 
             type: "POST", 
             data: JSON.stringify({'tag' : "'"+request.term+"'"}),
             dataType: "json",
             success: function(data) {
                response($.map(data, function(v,i){
                    console.log();
                    return {
                        label: v.empName,
                        value: v.empName
                     };
                }));
            }
           });              
        }   
    });
});

如何在键入输入文本时进行ajax调用并返回结果

重要

9 个答案: