javascript - Jquery UI 自动完成列表不刷新

Question

所以我使用 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);
      }

Answer 1

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

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

这是修改后的代码片段:

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 应用程序的目标就实现了。 :)

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