2011-04-10 28 views
3

我重写jQuery的自动完成功能显示简单的链接(<a href=...>“)和一些额外的格式,将需要更复杂的后成为点击。在点击链接时不能使链接在jQuery的自动完成

什么也没有发生。有一种方法来消除任何事件处理程序或其他代码被拦截的点击,使他们像预期的那样?

有几个相关的问题(如#4536055)具有良好的答案,但他们处理的默认自动完成的行为。该source答案似乎像黑客 - 链接应该像链接功能。

我的代码:

$.widget("custom.complete_custom", $.ui.autocomplete, { 
     _renderMenu: function(ul, items) { 
      // Trigger a "See all" link if there are two many results 
      var self = this; 
      var too_long = false; 
      if (items.length > 10){ 
       original_length = items.length; 
       too_long = true; 
       items = items.slice(0,10); 
      } 

      // Display each result as a link 
      $.each(items, function(index, item) { 
       ul.append("<li class='ui-autocomplete-category'><a href='/building/" + item.buildingcode + "'>" + item.buildingname + "</a></li>"); 
      }); 

      // Add the "See all" link if necessary 
      if(too_long) { 
       ul.append("<li class='ui-autocomplete-category see-all'><a href='/search/" + 'term' + "'><strong>See all " + original_length + " results</strong></a></li>") 
      } 
     } 
    }); 


    // The autocomplete activator 
    $("#search").complete_custom({ 
    source: "/search/json", 
     minLength: 2 
    }); 
+0

您是否找到了解决办法? – simPod 2012-05-26 15:25:48

回答

0

的jQuery用户界面自动完成使用a标签内部在相当多的地方(在看它的JS和CSS),所以试图以某种方式改变他们没有他们的行为打算可以不可预测地工作。 _ renderItem函数将a标记中的每个自动填充项目都包装在一起,因此您可以将链接放入链接。我确信这可能需要时间和精力,但是当其他答案有效且易于实施时,这肯定是更好的选择?即使使用JS重定向,而不是直接链接,也是有点黑客。

+0

的确如此,另一个答案是更好的。但它似乎与自定义渲染分解;我不知道如何将选择功能应用于“查看所有”链接。 – 2011-04-10 20:01:34

0

也许是为时已晚,但也许对其他用户有用。

我们使用此代码得到它:现在

$.ui.autocomplete.prototype._renderItem = function(ul, item) { 
         var re = new RegExp("^" + "$&") ; 
         var t = item.label.replace(re,"<span>" + "$&" + "</span>");    
         return $("<li></li>") 
          .data("item.autocomplete", item) 
          .append("<A>" + item.label + "</A>") 
          .appendTo(ul); 
        }; 

,你可以修改里面想的阵列数据的“标签”字段。

例如,我们在每个标签内添加了一些新表格,但您也可以添加链接。

再见