在jQuery UI自动完成中使用HTML

在jQuery UI 1.8.4之前,我可以使用JSON数组中的HTML来构build自动完成。

我能够做到这样的事情:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>'; 

这将在下拉菜单中显示为红色文字。

从1.8.4不起作用。 我发现http://dev.jqueryui.com/ticket/5275告诉我使用自定义的HTML例子,我没有运气。

我怎么能让HTML显示在build议?

我的jQuery是:

 <script type="text/javascript"> $(function() { $("#findUserIdDisplay").autocomplete({ source: "ui_autocomplete_users_withuname.php", minLength: 2, select: function(event, ui) { $('#findUserId').val(ui.item.id); } }); }); </script> 

我的JSON数组包括如下所示的HTML:

 [{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}] 

添加到您的代码:

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

所以你的代码变成:

 <script type="text/javascript"> $(function () { $("#findUserIdDisplay").autocomplete({ source: "ui_autocomplete_users_withuname.php", minLength: 2, select: function (event, ui) { $('#findUserId').val(ui.item.id); return false; } }).data("ui-autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "</a>") .appendTo(ul); }; }); </script> 

注意:在旧版本的jQueryUI中使用.data("autocomplete")"而不是.data("ui-autocomplete")

这也logging在jquery-ui自动完成文档中: http : //api.jqueryui.com/autocomplete/#option-source

诀窍是:

  1. 使用这个jQuery UI扩展
  2. 然后在自动完成选项传递autocomplete({ html:true});
  3. 现在您可以传递html &lt;div&gt;sample&lt;/div&gt; 在自动完成的JSON输出的“标签”字段中。

如果您不知道如何将插件添加到JQuery UI,那么:

  1. 将插件(ScottGonzález的html扩展名)保存在js文件中或者下载js文件。
  2. 您已经在您的html页面(或jquery-ui js文件)中添加了jquery-ui自动完成脚本。 在该自动完成JavaScript文件之后添加此插件脚本。

这个解决scheme不build议,但你可以编辑源文件jquery.ui.autocomplete.js(v1.10.4)

原版的:

 _renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)}, 

固定:

 _renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)}, 

我有同样的问题,但我更喜欢使用我的选项的静态数组选项('源')的性能。 如果你尝试过这个解决scheme,你会发现jQuery也search整个标签。

EG如果您提供:

 [{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}] 

然后input“span”将匹配这两个结果,让它search的值只覆盖$.ui.autocomplete.filter函数:

 $.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})} 

您可以将最后一个参数c.value编辑为您想要的任何内容,例如c.id || c.label || c.value c.id || c.label || c.value c.id || c.label || c.value将允许您search标签,值或ID。

您可以根据需要为自动完成的源参数提供尽可能多的键/值。

PS:原始参数是c.label||c.value||c

我遇到了Clarence提到的问题。 我需要提供HTML以使样式和图像更加美观。 这导致键入“div”匹配所有元素。

但是,我的价值只是一个身份证号码,所以我不能让search运行。 我需要search来查找几个值,而不仅仅是ID号。

我的解决scheme是添加一个新的字段,只保存search值,并在jQuery UI文件中检查。 这就是我所做的:

(这是在jQuery UI 1.9.2;其他人可能是相同的。)

编辑6008行的filter函数:

 filter: function (array, term) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); return $.grep(array, function (value) { if (value.searchonly == null) return matcher.test(value.label || value.value || value); else return matcher.test(value.searchonly); }); } 

我添加了“value.searchonly”字段的检查。 如果在那里,它只使用该字段。 如果不在那里,它就像平常一样工作。

然后,像以前一样使用自动完成function,除了可以将“searchonly”键添加到JSON对象。

我希望能帮助别人!