jQuery的Catcomplete的鏈接

Question

所以，我嘗試使用HTML鏈接在我catcomplete的結果，但jQuery將自動轉換我的html代碼轉換成文本，就像在圖像上：

我的jQuery代碼是：

$("#global-search").catcomplete({ 
    delay: 0, 
    source: "globalsearch.php" 
}); 

請不要對我說用select: function(event, ui) { window.location.href = ui.item.value; }，因爲它只能一次使用Ajax時（我真的不知道爲什麼，但它只是不工作），我問一些問題昨天在這裏問如何解決它，沒有人幫助我 用它。

所以，回到HTML轉換成文本，我如何添加一個HTML超鏈接到我的結果？

globalsearch.php：

Answer 1

看一看的Custom Data and Display example。你會看到他們用自定義的方法取代了_renderItem方法。您需要執行相同的操作來覆蓋項目的顯示方式。

$('#global-search').data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li>") 
    .data("item.autocomplete", item) 
    .append((item.link) ? "<a href='" + item.link + "'>" + item.label + "</a>" : "<a>" + item.label + "</a>") 
    .appendTo(ul); 
}; 

沒有看到你globalsearch.php的輸出，我不能告訴你到底如何設置它，但基本上你想要一個link屬性添加到您返回的JSON，如果鏈接存在，打印鏈接爲href。

如何處理選擇鏈接vs外部鏈接作爲OP的練習。

Answer 2

從自動完成構件文檔

獨立使用的變體，標籤總是被視爲 文本。如果你想將標籤視爲html，你可以使用Scott González的html擴展。這些演示全部關注源選項的不同變體 - 查找與您的使用案例匹配的變體，並且 查看代碼。

ScottGonzález的html擴展名是https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js。我也發佈了下面的代碼。

/* 
* jQuery UI Autocomplete HTML Extension 
* 
* Copyright 2010, Scott González (http://scottgonzalez.com) 
* Dual licensed under the MIT or GPL Version 2 licenses. 
* 
* http://github.com/scottgonzalez/jquery-ui-extensions 
*/ 
(function($) { 

var proto = $.ui.autocomplete.prototype, 
    initSource = proto._initSource; 

function filter(array, term) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); 
    return $.grep(array, function(value) { 
     return matcher.test($("<div>").html(value.label || value.value || value).text()); 
    }); 
} 

$.extend(proto, { 
    _initSource: function() { 
     if (this.options.html && $.isArray(this.options.source)) { 
      this.source = function(request, response) { 
       response(filter(this.options.source, request.term)); 
      }; 
     } else { 
      initSource.call(this); 
     } 
    }, 

    _renderItem: function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append($("<a></a>")[ this.options.html ? "html" : "text" ](item.label)) 
      .appendTo(ul); 
    } 
}); 

})(jQuery); 

編輯嘗試同時使用擴展

$("#global-search").catcomplete({ 
    delay: 0, 
    html: true, 
    source: "globalsearch.php" 
});