2011-04-10 27 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); 
        }; 

,你可以修改裏面想的陣列數據的「標籤」字段。

例如,我們在每個標籤內添加了一些新表格,但您也可以添加鏈接。

再見