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，[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("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以获取更多信息。

jQuery UI自动完成onSelect重写

1 个答案: