2

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

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 函数相同的显示更改。

任何帮助将非常感激。谢谢。

4

1 回答 1

0

这有点骇人听闻，但它确实有效。

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

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 选项和打开事件文档以获取更多信息。

于 2012-10-16T15:14:28.560 回答