如何自定义自动完成
Posted
技术标签:
【中文标题】如何自定义自动完成【英文标题】：How customize autocomplete 【发布时间】：2019-09-19 10:24:10 【问题描述】：我需要显示自定义 自动完成 json 数据。 JSON文件格式为：
[
"full_name":"Meena Khadikar","slug":"meena-khadikar","people_id":"630","name":"kumar,prabhu",
"full_name":"Meena","slug":"meena","people_id":"817","name":"",
"full_name":"Seshadri Meenakshi","slug":"meenakshi-seshadri","people_id":"1410","name":"meenan kumaran"
]
如果我的输入是 mee，结果应该是：
见na Khadikar 见呐 Seshadri Meenakshi如果输入是kum：
米娜·卡迪卡 (kumar,prabhu) Seshadri Meenakshi (meenan kumaran)我的尝试是：
$( ".search_name" ).autocomplete(
minLength: 2,
source: function( request, response )
var inp = request.inp;
if ( inp in cache )
response( cache[ inp ] );
return;
$.getJSON( "<?php echo PROJECT_PATH.'searchProfile'; ?>", inp: request.inp, function( data, status, xhr )
cache[ inp ] = data;
response( data );
);
$.ui.autocomplete.prototype._renderItem = function (ul, item)
item.full_name = item.full_name.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.inp) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a href="<?php echo PROJECT_PATH.'searchProfile'; ?>'+item.slug +'/'+item.people_id + '">' + item.full_name + '</a>')
.appendTo(ul);
;
,
select: function (event, ui)
var href = '<?php echo PROJECT_PATH.'searchProfile'; ?>'+ui.item.slug +'/'+ui.item.people_id;
window.location.href = href;
return false;
,
focus: function (event, ui)
event.preventDefault();
$("#search_name").val(ui.item.slug);
);
以更好的方式编辑我的脚本。
【问题讨论】：
【参考方案1】：您有四个主要问题：
-
_renderItem 调用必须添加到自动完成实例中。
您需要过滤进入 getJSON 调用的结果值。
您需要在 _renderItem 回调中使用 this._value()
您需要在需要时连接 full_name 和 name 字段。
var data = [
"full_name":"Meena Khadikar","slug":"meena-khadikar","people_id":"630","name":"kumar,prabhu",
"full_name":"Meena","slug":"meena","people_id":"817","name":"",
"full_name":"Seshadri Meenakshi","slug":"meenakshi-seshadri","people_id":"1410","name":"meenan kumaran"
];
$(".search_name").autocomplete(
minLength: 2,
source: function (request, response)
var inp = request.term;
//$.getJSON('1.json', inp: request.term, function (data, status, xhr)
var filteredData = data.filter(e => e.full_name.toLocaleLowerCase().indexOf(request.term.toLocaleLowerCase()) != -1 ||
e.name.toLocaleLowerCase().indexOf(request.term.toLocaleLowerCase()) != -1);
response(filteredData);
//);
,
select: function (event, ui)
var href = '1.json' + ui.item.slug + '/' + ui.item.people_id;
window.location.href = href;
return false;
,
focus: function (event, ui)
event.preventDefault();
$("#search_name").val(ui.item.slug);
).autocomplete("instance")._renderItem = function (ul, item)
var val = item.full_name;
if (val.toLocaleLowerCase().indexOf(this._value().toLocaleLowerCase()) == -1)
val += '(' + item.name.replace(',', ' ') + ')';
val = val.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this._value()) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a href="1.json' + item.slug + '/' + item.people_id + '">' + val + '</a>')
.appendTo(ul);
;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" class="search_name">
</div>【讨论】：
以上是关于如何自定义自动完成的主要内容，如果未能解决你的问题，请参考以下文章