10

如果我使用 _renderItem，我的选择事件将不起作用。如果我注释掉调用 _renderItem 的最后一段代码，则选择事件有效。当我使用 _renderItem 时，选择事件根本不会触发。 

var cache = {}, lastXhr; 

$("#hifind-find").autocomplete({
  source: function(request, response) {

    var term = request.term; 
    if (term in cache) {
      response(cache[term]);
      return;
    }

    var posturl = '/hifind/jquery_ui/autocomplete/'+term; 
    lastXhr = $.post(posturl, function(data, status, xhr) {
      cache[term] = data; 
      if (xhr === lastXhr) {
        response(data); 
      } 
    }, 'json');
  },
  delay: 300,
  minLength: 1,
  select: function(event, ui){
    window.location = ui.item.dest;
  }
});

$.ui.autocomplete.prototype._renderItem = function(ul, item) {
  return $("<li></li>")
    .data("item.autocomplete", item)
    .append('<img src="' + iconImgPath + item.flag + '-search.png" class="icon-autocomplete-bundle">' + item.label )
    .appendTo( ul );
};

如果我做类似的事情，我会得到相同的结果......

$("#hifind-find").autocomplete(myConfig).data("autocomplete")._renderItem = renderItemFunction;

无论哪种方式，选择都不会触发。_renderItem 做了它应该做的事情。它修改了项目并且没有错误，但似乎破坏了选择。

4

1 回答 1

14

我相信这是因为您没有将项目包装在锚 ( a) 标记中。更新您的代码以将其包装img在一个锚点中，它会正常工作：

$.ui.autocomplete.prototype._renderItem = function(ul, item) {
  return $("<li></li>")
    .data("item.autocomplete", item)
    .append('<a><img src="' + iconImgPath + item.flag + '-search.png" class="icon-autocomplete-bundle">' + item.label + '</a>')
    .appendTo( ul );
};

以下是一些可能有帮助的示例：

  • a在生成的标记中不包含标记的示例_renderItem（select在这里像您的问题一样被破坏）：http: //jsfiddle.net/MaLqe/

  • 在生成的标记中带有a标记的示例：http: //jsfiddle.net/3zSMG/

于 2012-06-05T15:49:45.973 回答