Question

所以我使用jquery ui autocomplete，其中显示的列表是通过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调用以将结果返回给源。但是，由于我的目标是制作这个商业应用程序，同时使用websockets替换所有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应用程序。：）

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

Jquery UI自动完成列表不刷新

1 个答案: