自动补全、自动提示的两种实现方式（前端实现与后端实现） |
您所在的位置：网站首页 › markedjs自动补全 › 自动补全、自动提示的两种实现方式（前端实现与后端实现） |
自动补全、自动提示的两种实现方式（前端实现与后端实现）
|
input输入框有时需要实现自动提示的功能，如下图：
那么怎么实现呢？一是使用autocomplete属性，二是直接调用后端的服务。下面分别记录一下代码，以供参考。 1.autocomplete 引入jquery-ui.min.css与jquery-ui.min.js，代码如下。 $(function() { var availableTags = ["标缝路","诚信路","公诚路","万诚路","何寇路","何潘路","何新路","栎西路","房西路","文化东路","桃源东路","石家东路"]; $( "#roadline" ).autocomplete({ source: function(request, response) { var results = $.ui.autocomplete.filter(availableTags, request.term); response(results.slice(0, 10));//只显示自动提示的前十条数据 }, messages: { noResults: '', results: function() {} }, }); }); 运行结果如下：
2.直接调用后端服务
这种方法比较适合数据量大的情况，代码来自于同组师兄~~
代码如下（注意修改服务地址）：
①index.html:
Document
var autoBox = $(".autoComplete"),
autoUl = $(".autoComplete ul"),
textFill = $("#txtAddress");
$("#txtAddress").on("keyup",function(e){
//38：向上箭头；40：向下箭头；13：Enter键
if(e.keyCode!=38&&e.keyCode!=40&&e.keyCode!=13){
textSearch = $(this).val();
setTimeout(function(){
autoMapPg.getData(textSearch);
},100)
}
});
$(".autoComplete ul").on("click",".suggestItem",function(e){
var ft = $(this).attr("data-item");
textFill.val(ft);
autoMapPg.getData(ft).then(function (data) {
//autoMapPg.abovePoint(data,ft)
})
});
$(".search").on("click", function(e){
var result = "",
addressDistrict = "";
if(!textFill.val()) return;
autoMapPg.detailData(textFill.val()).then(function(data){
//autoMapPg.abovePoint(data);
})
});
var autoMapPg={
//获取实时提示数据
getData : function(textSearch){
var dfd = $.Deferred(),
searchHtml = "",
addressDistrict = "";
if(textSearch){
var ft = textSearch.toString().toLowerCase();
$.ajax({
type:"post",
data:ft,
url:"后端服务地址1",
success:function(result){
var result = JSON.parse(result);
console.log(result)
if(result.length){
for(var i=0,len=result.length;i |
【本文地址】
今日新闻 |
推荐新闻 |