【问题标题】:Jquery autocomplete not showing autocomplete dropdown?Jquery自动完成不显示自动完成下拉菜单?
【发布时间】:2018-10-29 23:50:17
【问题描述】:

我有一个搜索输入字段 - 当用户搜索任何字符串时,它会显示自动完成下拉菜单。但是,由于某种原因,它没有显示自动完成下拉菜单。但是,当我找到我的基本 url 并在地址栏中以 /JobSearchItem.xhtml 路径结尾时,它只会返回我的 json 格式的结果。但是,它没有显示任何自动完成下拉菜单。任何人都可以检查我如何让我的自动完成显示。谢谢。 PS:如果你们需要我展示更多代码,请告诉我。

这是我的代码:

     $(function() {


   var base_url = "http://localhost:8080/myapp/";
    $( "#searchTextField" ).autocomplete({

         source: function( request, response ) {
        $.ajax({
          url: base_url + "JobSearchItem.xhtml",
          dataType: "json",
          data: {
            q: request.searchValue
          },
          success: function( data ) {
            response( $.map(data, function(v,i) { 
                    return { jobClassCD: v.jobClassCD, jobClassTitle: v.jobClassTitle }; 
                 }) 
            );
          }
        });


    });

  }); 

json 响应

    [{"jobClassCD":"1000","pGrade":"0","jobGroup":"","jobClassTitle":"ABC DEVELOPER"} 

【问题讨论】:

  • 您在需要返回响应的函数中使用输入错误。
  • 在我的前端搜索输入中,对吧?
  • 这是我的 html 输入:<input type="text" name="searchValue" id="searchTextField" class="form-control" placeholder="search"/>

标签: javascript jquery autocomplete


【解决方案1】:

您可以尝试这样做:

$(function() {
  var base_url = "http://localhost:8080/myapp/";
  $.ajax({
    url: base_url + "JobSearchItem.xhtml",
    dataType: "json",
    data: {
      q: request.searchValue
    },
    success: function(data) {
      var newAray = $.map(data, function(v, i) {
        return {
          jobClassCD: v.jobClassCD,
          jobClassTitle: v.jobClassTitle
        };

        $("#searchTextField").autocomplete({
          source: newArray
        });
      });
    }
  });

});

【讨论】:

  • 感谢您的回答。但它没有用。当我通过地址栏时,是否应该向您显示 json 结果?
  • 我是否需要在我的 jquery 中添加一个“GET”参数才能看到我的下拉列表?
  • 请给我json响应,并尝试我更新的代码。可能存在与 Promise 相关的问题,这意味着您需要在初始化自动编译器之前等待 ajax 响应。
  • 请在我更新的问题中查看我的 json 回复。另外,我尝试了更新的答案仍然没有显示。
  • 因为当我使用您更新的代码进行搜索时,在控制台中我得到:ReferenceError: request is not defined
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-09
  • 1970-01-01
  • 2011-08-16
  • 2019-10-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多