突出顯示jQuery UI自動完成

我在jQuery UI 1.8.6中使用了自動完成功能。我想突出顯示匹配結果。但由於某些原因，當我使用正則表達式在匹配字符周圍添加「強」標籤時，字符串正在被轉義。所以我看到[strong]matching chars[/strong]，而不是標記文字。突出顯示jQuery UI自動完成

這是我目前使用的JavaScript：

$(function() { 

    $("#autocompleteinputfield").autocomplete({ 
     source: function (request, response) { 

      $.ajax({ 
       url: "someservice", 
       type: "GET", 
       dataType: "json", 
       data: { filter: request.term, maxResults: 10 }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         // return { label: item.ID + ' - ' + item.Name, id: item.ID, value: item.Name } 
         var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 

         return { label: (item.ID + ' - ' + item.Name).replace(regex, "<strong>$1</strong>"), 
           id: item.ID, 
           value: item.Name 
           } 

        })) 
       } 
      }); 
     }, 
     select: function (event, ui) { 
      alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id) 
        : "Nothing selected, input was " + this.value); 
     } 
    }); 

});

更新：

「輸入」（在文本框中輸入文本在這種情況下：[輸入類型= 「文本」的id = 「autocompleteinputfield」/]

輸出看起來像這樣：

[{ 「描述」：「沒有什麼意義的」，「ID」：3，「名稱」：「喬公共」}]

來源

2010-11-05 Saab

當AJAX數據來自於響應，它是什麼樣子？ – 2010-11-05 15:19:41

jQuery自動完成源代碼是罪魁禍首。如果您在實際的JavaScript文件看，你會發現這個定義在自動完成列表中顯示的項目：

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

你會看到它的追加「的.text（item.label）」，它使HTML來逃脫。爲了解決這個問題，你必須採取一種手段來覆蓋這個「_renderItem」方法，將用附加標籤作爲純文本的行替換爲將標籤附加爲html的行。因此，更新你的代碼是這樣的：

$(function() { 
    $("#autocompleteinputfield").autocomplete({ 
     // leave your code inside here exactly like it was 
    }) 
    .data('autocomplete')._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append('<a>' + item.label + '</a>') 
      .appendTo(ul); 
    }; 
});

更新：隨着版本的jQuery> = 1.10，也有一些小的修改：

$(function() { 
    $("#autocompleteinputfield").autocomplete({ 
     // leave your code inside here exactly like it was 
    }) 
    .data('ui-autocomplete')._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("ui-autocomplete-item", item) 
      .append('<a>' + item.label + '</a>') 
      .appendTo(ul); 
    }; 
});

來源

2010-11-05 16:19:25

純javascript警報（）不顯示html。看看使用模態或其他東西。或者像其他人說的那樣，發佈一些特定的輸入/輸出。

來源

2010-11-05 15:27:00 ryan

我認爲他在select中的「alert」只是一個測試，最終被實際運行的代碼取代。問題在於jQuery自動完成插件不支持實際自動換行列表中的標籤中的html - 您必須添加黑客才能實現該功能。 – 2010-11-05 16:31:57

$.extend($.ui.autocomplete.prototype, { 
    _renderItem: function (ul, item) { 
     var searchMask = this.element.val(); 
     var regEx = new RegExp(searchMask, "ig"); 
     var replaceMask = "<b style=\"color:green;\">$&</b>"; 
     var html = item.label.replace(regEx, replaceMask); 

     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append($("<a></a>").html(html)) 
      .appendTo(ul); 
    } 
});

來源

2014-03-25 17:26:23 user3460922

overrites完美無缺（使用rails jquery ui gem） – mymlyn 2014-05-30 16:55:14

突出顯示jQuery UI自動完成

回答

相關問題