jQuery加Ajax搜尋框輸入文字自動補全程式碼

JsonpAjax.js包含程式碼

$(function(){
//当键盘键被松开时发送Ajax获取数据
		$('#text').keyup(function(){
			var keywords = $(this).val();
			if (keywords=='') { $('#word').hide(); return };
			$.ajax({
				url: 'http://suggestion.baidu.com/su?wd=' + keywords,
				dataType: 'jsonp',
				jsonp: 'cb', //回调函数的参数名(键值)key
				// jsonpCallback: 'fun', //回调函数名(值) value
				beforeSend:function(){
					$('#word').append('<div>正在加载。。。</div>');
				},
				success:function(data){
					$('#word').empty().show();
					if (data.s=='')
					{
						$('#word').append('<div class="error">Not find  "' + keywords + '"</div>');
					}
					$.each(data.s, function(){
						$('#word').append('<div class="click_work">'+ this +'</div>');
					})
				},
				error:function(){
					$('#word').empty().show();
					$('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');
				}
			})
		})
//点击搜索数据复制给搜索框
		$(document).on('click','.click_work',function(){
			var word = $(this).text();
			$('#text').val(word);
			$('#word').hide();
			// $('#texe').trigger('click');触发搜索事件
		})

	})

Jquery是網頁程式設計所需的重要技術之一。 Jquery是繼prototype之後又一個優秀的Javascrīpt框架，它是輕量級的js庫(壓縮後只有21k) ，它相容於CSS3，還相容於各種瀏覽器。 jQuery讓用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX互動。 jQuery還有一個比較大的優點是，它的文件說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。 jQuery能夠讓使用者的html頁保持程式碼和html內容分離，也就是說，不用再在html裡面插入一堆js來呼叫指令了，只要定義id即可。開發週期短，上手快，入門低，但是進階難一般常用的jquery特效jquery焦點圖jquery選項卡jquery滾動條jquery下拉廣告,jquery圖片延時加載等，jquery代碼,放大鏡特效，jquery廣告代碼，jquery導航，jquery線上客服，jquery相簿代碼等等