最近需要做一个在输入框中输入内容时,可以给出智能提示,以遍方便输入结果。于是通过搜索相关资料,最终通过下面的方式实现了。
- 在html中加入输入框标签
<input type="text" id="user" required autocomplete="off">
- 在js中利用id属性加载智能提示不全代码
//存放提示的数据,可以利用ajax把需要提示的数据添加进去
var availableTags = [];
$.ajax({
url: "XXXX",
type: "post",
success:function (data) {
// console.log(data)
for (let i = 0; i < data.length; i++) {
availableTags.push(data[i].name);
}
}
})
$( "#user" )
// 当选择一个条目时不离开文本域
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
var names = availableTags;
// 回到 autocomplete,但是提取最后的条目
response( $.ui.autocomplete.filter(
names, extractLast( request.term ) ) );
},
focus: function() {
// 防止在获得焦点时插入值
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// 移除当前输入
terms.pop();
// 添加被选项
terms.push( ui.item.value );
// 添加占位符,在结尾添加逗号+空格
terms.push( "" );
this.value = terms.join( ";" );
return false;
}
});
//分割函数,自动添加以分号结尾
function split( val ) {
return val.split( /;\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
提示结果如图: