突出显示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自动完成

回答

相关问题