jquery-ui - jQuery UI 自动完成 onSelect 重写

Question

我有一个文本框，我将自动完成功能附加到其中。当您开始输入时...它会在数据库中查找并返回/缩小适当的内容。当用户从返回的列表中进行选择时...将返回图像和一些其他信息并将其放置在页面中。效果很好。见下文:

jQuery(function ($) {
var a = $('#artistName').autocomplete({ 
    serviceUrl: '/link/to/processor.ashx?action=artist',
    minChars:1, 
    maxHeight:400,
    width:300,
    zIndex: 9999,
    deferRequestBy: 0, 

    // callback function:
    onSelect: function(value, data){ 
        if (data) {
            var artistData = data.split('|');
            var src = '<%= ImageServer %>' + '/path/to/image/' + value + '.jpg';
            $("#artistPhoto").attr('src', src);
            $('#artistExt').remove();

            if (artistData[1] !== undefined && artistData[1] != 0) {
                $("#artistSection").append('<div id="artistExt"><span>Contact me @</span> 1-888-123-4567 Ext: ' + artistData[1] + '</div>');
            }
        }
    }
});    
});

我想做的是，如果用户未从列表中进行选择，则提供相同的功能(例如...用户可以开始输入“Bill”之类的名称，自动完成将返回“Bill”.. .但是如果用户没有从返回的结果列表中选择“Bill”而只是键入名称...显然什么都不会发生，因为该事件位于 onSelect 函数上。

有人可以帮我弄清楚如何以一种只要有匹配就触发 onSelect、onChange、onLoad、onKeyUp、on[enter] 等事件的方式编写此代码吗？只寻找值/长度是否更好？还有一种情况可能会发生，即用户输入页面并且文本框已预先填充。在这种情况下，我想要与 onSelect 函数相同的显示更改。

任何帮助将不胜感激。谢谢。

Answer 1

这有点像黑客，但它确实有效。

在设置自动完成之前，添加一个变量:

var firstitem = null;

使用此代码将 open 选项添加到自动完成功能中。

open : function (event, ui) {
  firstitem = j$(j$("#SelectProject").data("autocomplete").menu.element.children().first()[0].innerHTML).html();
}

定义自动完成功能后，将模糊事件绑定(bind)到自动完成输入。

.bind("blur", function () { j$(this).val(firstitem); } );

最终结果应如下所示:

jQuery(function ($) {

  var firstitem = null;
  var a = $('#artistName').autocomplete({
      serviceUrl : '/link/to/processor.ashx?action=artist',
      minChars : 1,
      maxHeight : 400,
      width : 300,
      zIndex : 9999,
      deferRequestBy : 0,

      // callback function:
      onSelect : function (value, data) {
        if (data) {
          var artistData = data.split('|');
          var src = '<%= ImageServer %>' + '/path/to/image/' + value + '.jpg';
          $("#artistPhoto").attr('src', src);
          $('#artistExt').remove();

          if (artistData[1] !== undefined && artistData[1] != 0) {
            $("#artistSection").append('<div id="artistExt"><span>Contact me @</span> 1-888-123-4567 Ext: ' + artistData[1] + '</div>');
          }
        }
      },

      open : function (event, ui) {
        firstitem = j$(j$("#SelectProject").data("autocomplete").menu.element.children().first()[0].innerHTML).html();
      }
    }).bind("blur", function () { j$(this).val(firstitem); } );

});

此外，请参阅 selectFirst 插件、 autoFocus option 和 open event documentation 了解更多信息。