Jquery UI自动完成列表不刷新

Posted 2023-05-08

【中文标题】Jquery UI自动完成列表不刷新

【英文标题】：Jquery UI Autocomplete List does not refresh

【发布时间】：2014-02-07 17:03:54

【问题描述】：

所以我正在使用 jquery ui 自动完成，其中显示的列表是通过 WebSockets 获取的。在输入字段 (.keyup()) 上的每次击键时都会调用获取列表。问题是，一旦我输入一个字符并获取并显示相应的列表，下一次击键将在前一个列表的输入字段中搜索搜索参数，而不是获取的新参数。要获得新选项，我需要按退格键。例如，如果我在输入中输入“S”，则将获取并显示与“S”对应的结果。如果我进一步输入“h”，使搜索项为“sh”，则获取与“sh”对应的列表，但自动完成在前一个列表中搜索“sh”。简单地说，列表不会立即刷新。如何让列表立即刷新？提前感谢您的帮助。

更新：所以这里有一些代码： 这是检测到击键并启动搜索的部分

$('#pick_up_location').keyup(function(e) 
var param = $("#pick_up_location").val();                                  
var userType = "1";                                             
search(param, userType,"CBPickSearchAction", "", 0);                                                        

这是在自动完成中显示收到的结果的地方：

function onMessage(data) 
try
  
    var obj =  $.parseJSON(data);
    $("#pick_up_location").autocomplete(
         source: obj,
             minLength: 0,
         delay: 0,
         autoFocus: true,
         search  : function() 
         ,
            //open    : function()$(this).removeClass('working'); $(".ui-autocomplete").width($(this).width());,
            focus: function( event, ui ) 
                event.preventDefault();
                return false;
              ,
              open    : function(event, ui)
                    $('#pick_up_location').autocomplete("widget").width(); 

             .data( "ui-autocomplete" )._renderItem = function( ul, item ) 
            return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + item.label + "</a>" )
              .appendTo( ul );
          ;

          $("#pick_up_location").autocomplete('enable');
          $("#pick_up_location").keydown();
   catch(err)
      
        //console.log( err.message);
      

【问题讨论】：

我认为如果您包含您的代码会很有帮助。

我用代码更新了我的帖子

当代码不完整（缺少几个大括号和括号）并且没有正确缩进时，很难看出任何潜在的问题。你能修复你的代码示例吗？或者也许创建一个jsfiddle？

发布代码只是为了让您了解我如何实现自动完成功能。当我在这里复制并粘贴它时，并没有真正瞄准它的语法正确。我不可能在 jsfiddle 中显示它运行。它是我正在开发的一个更大的应用程序的一部分。正在从后端的数据库中获取自动完成列表。

我明白了。尽管如此，它仍然很难发现任何问题。我的建议是尝试简化您的代码，直到它可以工作（或从一个简单的示例开始），然后一次添加一个。它甚至可以让您更好地了解组件的工作原理。

【参考方案1】：

所以我终于找到了解决方案。问题是，通常在从另一个域检索自动完成列表时，会进行 ajax 调用以将结果返回到源。但是，由于我的目标是制作这个商业应用程序，同时使用 websocket 替换所有 ajax 调用，因此自动完成功能无法按预期工作。此外，我已将自己限制为只打开一个 websocket 进行所有 API 调用。

我所要做的就是在 javascript 中与 Java 中的 websocket 建立一个新连接，并使用它的 onmessage 函数来接收结果并将它们放在自动完成的响应中。以前，自动完成的源是一个 var，其中包含返回时的结果。但这并不完全按预期工作，因为在每次击键时它只是搜索已经存在的结果。您必须输入退格键才能刷新列表。

这是修改后的代码sn-p：

function locationSearch() 
     $("#pick_up_location").autocomplete(
        source: function(request,response) 
            var action = "CBPickSearchAction";
            var userType = 1;
            var requestString = createRequestStringForLocationSearch(action, userType, request.term);
            webSocket_local.send(requestString);

            webSocket_local.onmessage = function(event) 
                data = event;
                data = formatLocationResponse(data, action);
            response($.parseJSON(data));
            ;
        ,
         minLength: 0,
         delay: 0,
         autoFocus: true,
            focus: function( event, ui ) 
                event.preventDefault();
                return false;
              ,
              open    : function(event, ui)
                    $('#pick_up_location').autocomplete("widget").width(); 
            ,
          .data( "ui-autocomplete" )._renderItem = function( ul, item ) 
            return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + item.label + "</a>" )
              .appendTo( ul );
          ;




  $('#pick_up_location').keyup(function(e) 
       locationSearch();
   

这样，我创建一个无 ajax 的 Web 应用程序的目标就实现了。 :)

如果有人有更好的解决方案，我很想知道。