js拓展詞搜尋智慧提示
阿新 • • 發佈:2019-02-11
類似如下的功能:
js關鍵程式碼
$(function(){ //當鍵盤鍵被鬆開時傳送Ajax獲取資料 $('#spinput').keyup(function(){ var keywords = $(this).val(); $.ajax({ // url: 'http://suggestion.baidu.com/su?wd='+keywords, url: "https://mbsug.ssl.so.com/sug?channel=type_webpage&word="+keywords+"&count=6", type:"get", dataType:"jsonp", jsonp: 'callback', //回撥函式的引數名(鍵值)key success:function(data){ // console.log(data); $('#word').empty().show(); $.each(data.data.sug, function(){ $('#word').append('<div class="click_work">'+ this.word +'</div>'); }) }, error:function(data){ } }) }) //點選搜尋資料複製給搜尋框 $(document).on('click','.click_work',function(){ var inputword = $("#spinput").val(); var word = $(this).text(); $('#spinput').val(word); $('#word').hide(); // Avatar.push(['track', ['search', 'result', '', {arg1:0, arg2:0, arg3:0, arg4:0, arg5:0}, 0]]); searchcontent(1,inputword); // $('#texe').trigger('click');觸發搜尋事件 }) })
css關鍵樣式:
普通的div局,可自定義佈局.searchinput{padding-top: 30px;height: 35px} .searchinput .searchlogo{margin-right:9px ;margin-top:12px; margin-left:200px; width: 91px;height: 26px;background: url("https://s3.cn-north-1.amazonaws.com.cn/cn-browser/version-0001/img/360search.png") no-repeat;background-size: 100% auto; } .searchinput input{width: 500px;height: 35px;font-size: 16px;position: relative;} .searchinput .searchBtn{margin-left:0px;line-height:2.6; width:100px; height: 41px;font-family: HYQiHei;background-color:#ff2525;color: #fff5f5;font-weight: bolder;cursor: pointer;} .m-search .wrap .searchinput .searchBtn:hover{background-color: #e2231a}
<div class="searchinput"> <div class="searchlogo fl"></div> <div class="fl"><input name ="spinput" id = 'spinput' type="text" /></div> <a class="searchBtn" onclick="searchcontent(1)" onblur="upperCase()">搜尋一下</a> <div id="word"></div> </div>