1. 程式人生 > >js拓展詞搜尋智慧提示

js拓展詞搜尋智慧提示

類似如下的功能:


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關鍵樣式:
.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局,可自定義佈局
	<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>