jquery ui autocomplete _renderItem 似乎干扰了选择事件 [英] jquery ui autocomplete _renderItem seems to interfere with select event

问题描述

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

My select event doesn't work if I use _renderItem. If I comment out the last block of code where I call _renderItem, the select event works. When I use _renderItem, the select event doesn't fire at all.

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 );
};

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

I get the same result if I do something like...

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

无论哪种方式，都不会触发选择._renderItem 做它应该做的.修改了item，没有报错，但是好像打断了select.

Either way, the select doesn't fire. _renderItem does what it's supposed to. It modifies the item and there are no errors, but it seems to break the select.

推荐答案

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

I believe this is because you are not wrapping the item in an anchor (a) tag. Update your code to wrap the img in an anchor and it'll work fine:

$.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 );
};

以下示例可能会有所帮助:

Here are some examples that might help:

• 在 _renderItem 生成的标记中不包含 a 标记的示例(select 在这里被破坏，就像你的问题一样):http://jsfiddle.net/MaLqe/

• Example without including an a tag in the markup generated in _renderItem (select is broken here like in your question): http://jsfiddle.net/MaLqe/

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

这篇关于jquery ui autocomplete _renderItem 似乎干扰了选择事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！