自動補全、自動提示的兩種實現方式（前端實現與後端實現）
阿新 • • 發佈：2019-01-08
②aboveTool.css:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="aboveTool.css"> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div class="nav"> <input type="text" id="txtAddress"> <button class="search"></button> </div> <div> <div class="autoComplete"> <ul></ul> </div> </div> <script> 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<len;i++){ searchHtml += '<li class="suggestItem" data-item="'+result[i].Name+'"><i class="default">'+result[i].Name+'</i></li>'; } } autoBox.show().siblings().hide(); autoUl.html(searchHtml); listLength = autoUl.children().length; dfd.resolve(result) } }) return dfd.promise(); }else{ autoUl.html(""); $(".dataUpload").show(); } }, detailData : function(text){ var dfd = $.Deferred(); $.ajax({ type:"post", url:"後端服務地址2", data:"text="+text, success:function(result){ var result = JSON.parse(result); if(result.status == 0){ result = result.obj.results; dfd.resolve(result) }else{ console.log(result) } } }) return dfd.promise() } }; </script> </body> </html>