jquery_jquery に基づく Baidu 検索ボックス模倣効果コード

レンダリング全体を見てみましょう: 図 1:

写真 2:

写真 3:

写真 4:

おおよそのレンダリングは次のようになります。 次に、ソース コード ページを直接確認します。

コードをコピーします コードは次のとおりです。 🎜> > $(document).ready(function() { $('#autoSearchText').autoSearchText({ width: 300, itemHeight: 150,minChar:1, datafn: getData, fn:alertMsg }) ; }); function alterMsg(vl){ alert('検索するキーワードは次のとおりです: } /*データの読み込み*/ function getData(val) { var arrData = new Array(); if (val != "") { $.ajax({ type : "post", async : false, //同期制御 url: "getData.ashx", data: "param=" val, dataType: "json", キャッシュ: false、 成功: function(data) { for (var i = 0; i if (val == data[i].Code.substring (0, val.length)) arrData.push(data[i].Code); } }, エラー: function(err) { alert(err); } }) ; }

CSS:

コードをコピー コードは次のとおりです: .autoSearchText{ border:solid 1px #CFCFCF; height:20px; } .menu_v{ margin:0; line-height:20px; list-style-type:なし; } .menu_v li{ マージン:0; フォントサイズ:14px;スタイルタイプ:none; float: none; .menu_v li span{ color:Red; } #autoSearchItem{ border:solid 1px # CFCFCF; 可視性:非表示; 背景色:白;

JS: 🎜>

コードをコピー

コードは次のとおりです: 1 /// 2 3 (function($) { 4 var itemIndex = 0; 5 6 $.fn.autoSearchText = function(options) { 7 //以下はプラグインのプロパティとそのデフォルト値です 8 var deafult = { 9 width: 200 , //テキストボックスの幅 itemHeight: 150, //ドロップダウンボックスの高さ minChar: 1, //最小文字数（何番目から検索を開始するか） datafn: null, //データ関数のロード fn: null //項目の選択後にトリガーされるコールバック関数 }; var textDefault = $(this).val(); extend(default, options); $(this).width(ops.width); var autoSearchItem = ' ;/ul> '; $(this).after(autoSearchItem); $('#autoSearchItem').width(ops.width 2); //項目の幅を設定します🎜>$('#autoSearchItem' ).height(ops.itemHeight); //アイテムの高さを設定します $(this).focus(function() { if ($(this).val() = = textDefault) { $(this).val(''); $(this).css('color', 'black'); }; var itemCount = $('li' ).length; //項目数 /*マウスボタンを押すとドロップダウンボックスが表示され、項目を横切ると背景色が変化し、入力ボックスに割り当てられます*/ $(this).bind(' keyup', function(e) { if ($(this).val().length >= ops.minChar) { varposition = $(this).position(); $ ('#autoSearchItem').css({ 'visibility': 'visible', 'left':position.left, 'top':position.トップ 24 }); var data = ops.datafn($(this).val()); initItem($(this), data); .length; switch (e.keyCode) { case 38 : //Up if (itemIndex > 1) { itemIndex--; li:nth-child(' itemIndex ')').css({ '背景 ': '青', '色': '白' }); -child(' itemIndex ')').find('font').text ()); break; case 40: //Next if (itemIndex itemIndex ; } $('li:nth-child( ' itemIndex ')').css({ '背景': '青', '色': '白' }); (this).val($('li:nth-child(' itemIndex ' )').find('font').text()); break; case 13: //Enter if (itemIndex > 0 && itemIndex $(this).val($('li:nth-child(' itemIndex ')').find('font').text( )); $('#autoSearchItem').css('visibility ', 'hidden'); ops.fn($(this).val()); ; default: break; } } }); /*ドロップダウンボックスを非表示にするには、空白をクリックします*/ $(document) ).click(function() { $('#autoSearchItem').css('visibility' , 'hidden'); }); };テキスト ボックス*/ $.fn.getValue = function() { return $(this) .val(); }; /*ドロップダウン ボックスのデータを初期化します。マウスを各項目の上に移動し、背景色を変更し、項目の値を入力ボックスに割り当てます*/ function initItem(obj, data ) { var str = "" if (data) .length == 0) { $('#autoSearchItem ul').html(' 一致するデータがありません '); } else { for (var i = 1; i str = " " i "/" data .length " r " data[i - 1] " "; } $('#autoSearchItem ul') str); } /*項目がクリックされたときに検索テキストボックスに値を代入します*/ $('li' ).each(function() { $(this) .bind('click', function() { obj.val($(this).find('font').text()); $('#autoSearchItem').css('visibility ', 'hidden'); }); }); /*マウスが各項目の上に移動したときに背景色を変更します*/ $('li').each(function) () { $(this).hover( function() { $('li:nth-child(' itemIndex ')' ).css({ '背景': '白', 'color': 'black' }); itemIndex = $('li').index($(this)[0]) 1; $(this).css({ '背景': '青', '色': '白' }); obj.val($('li:nth-child(' itemIndex ')').find ('font').text(); >}, function() { $(this).css({ '背景': '白', '色': '黒' } ); >}); }; })(jQuery);

コードをコピーします。

コードは次のとおりです: システムを使用しています。 System.Collections.Generic を使用; System.Linq を使用; System.Web を使用; System.Web.Services を使用します。 名前空間テーブル { /// /// $codebehindclassname$ の要約要旨 /// [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class getData : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.Clear(); 文字列値 = GetResult(); context.Response.Write(値); context.Response.End(); } プライベート文字列 GetResult() { 文字列結果 = string.Empty; 結果 = @" [{""id"":""1"",""コード"":""1374123""}, {""id"":""2 "",""コード"":""1374133""}, {""id"":""3"",""コード"":""1374143""}, {" "id"":""4"",""コード"":""1374153""}, {""id"":""5"",""コード"":""1374163" "}, {""id"":""6"",""コード"":""1374173""}, {""id"":""7"",""コード"":""1374183""}、 {""id"":""8""、""コード"":""1374193""}、 {""id"": ""9"",""コード"":""1374213""}, {""id"":""10"",""コード"":""1374223""}, {""id"":""11"",""コード"":""1374233""}, {""id"":""12"",""コード"":" "1374243""}、 {""id"":""13""、""コード"":""1374253""}、 {""id"":""14"" ,""コード"":""1374263""}、 {""id"":""15""、""コード"":""1374273""}、 {""id "":""16"",""コード"":""1374283""}, {""id"":""17"",""コード"":""1374293""} 、 {""id"":""18"",""コード"":""1374313""}、 {""id"":""19"",""コード" ":""1374323""}、 {""id"":""20""、""コード"":""1374333""}、 {""id"":"" 21"",""コード"":""1374343""}, {""id"":""22"",""コード"":""1374353""}, { ""id"":""23"",""コード"":""1374363""}, {""id"":""24"",""コード"":""1374373 ""}、 {""id"":""25""、""コード"":""1374383""}、 {""id"":""26""," "コード"":""1374393""}、 {""id"":""27""、""コード"":""1374403""}、 {""id"" :""28"",""コード"":""1374413""}, {""id"":""29"",""コード"":""1374423""}, {""id"":""30"",""コード"":""1374433""}, {""id"":""31"",""コード"": ""1374443""}、 {""id"":""32""、""コード"":""1374453""}、 {""id"":""33" ",""コード"":""1374463""}, {""id"":""34"",""コード"":""1374473""}, {"" id"":""35"",""コード"":""1374483""}, {""id"":""36"",""コード"":""1374493"" }]"; 結果を返します。 } public bool IsReusable { get { return false; } } } } デモ下ダウンロード