jQuery プラグインは、Baidu 検索ボックスのスマートプロンプトを模倣します (Value 値を使用)

会社は、Baidu を模倣し、値を持つ検索ボックスを作成する必要があるため、インターネット上にはテキストしか見つかりませんでしたが、値を持つものはなかったので、
コードを直接貼り付けました。

コードをコピーコードは次のとおりです:

');
c.after(d); "left": p.left、"top": p.top c.height() options .top、"width": options.width、"max-height": options.maxheight }); ('d.append(t)
d.append('');
c.bind("keydown", keydown_process );
c.bind("keyup", keyup_process);
c.bind("blur", Blur_process) ;
d.bind("focus", focus_div);
d.bind ("mouseout", Mouseout_div);
function Blur_process()
{
timeid = setTimeout (function(){
d.hide();
},200) ;
}
function Mouseout_div()
{
t.find(".nowRow")。
関数 focus_div()
{
c.focus();
}
関数 keydown_process(e) )
{
if(d.is(":hidden")){
return;
}
switch(e.keyCode)
{
ケース 38:
e.preventDefault();
var p = t.find(".nowRow ").prev();
if(p.length > 0){
d.setScroll(options. maxheight, p);
p.mouseover();
}else{
p = t.find("tr:last");
if(p.length > 0); 🎜>d.setScroll(options.maxheight, p);
p.mouseover() ;
}
}
case 40:
e.preventDefault();
var n = t.find(".nowRow").next();
if(n.length > 0){
d.setScroll(options.maxheight, n); n.mouseover();
}else{
n = t.find( "tr:first");
if(n.length > 0){
d.setScroll(options. maxheight, n);
n.mouseover();
}
ケース 13:
e.preventDefault(); find(".nowRow");
if(n.length > 0){
options.getValue(n.find("input:hidden").val()); (n.text());
lastValue = "";
}
>}
}
function keyup_process(e)
{
if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37 || e.keyCode == 39){
return;
}
if(c.val().length > options.autoLength){
if(c.val( ) == lastValue){
return; // ユーザーが同じ値に対する複数のリクエストを避けるために入力していることを考慮して、最後の値と等しいかどうかを判断します
}
lastValue = c.val( ); //リクエスト値を記録します
options.clearValue(); //値をクリアします
getData (c, function(data){
if(data.length == 0){
d.hide();
return;
}
t.find("tr") .remove();
$.each(data, function(){
t.append) (''); >});
var rows = t.find("tr");
rows.mouseover( function(){
t.find(".nowRow").removeClass("nowRow");
$(this).addClass("nowRow");
rows.click(function(){
options.getValue($(this).find("input:hidden) ").val());
c.val($(this).text());
options.getText(c.val());
lastValue = "";
d.hide();
c.setPosition();
});
d.hide();
}
}
function getData(o,process )
{
$.ajax({
type: options.type,
async: options.async, // 同期の制御
url: options.url,
data: o .attr("id") "=" o.val(),
dataType: "json" 、
キャッシュ: false、
成功: プロセス、
エラー: function(err) {
alert(err);
}
$.fn.resetEvent = function()
{
c.bind("keydown", keydown_process) ;
c.bind("keyup", keyup_process); ", Blur_process);
d.bind("focus", focus_div);
d.bind( "mouseout", Mouseout_div);
}
$.fn.setPosition = function()
{
var p = c.position();
d.css({ "left" : p.left, "top": p.top c.height() options.top }); 🎜>}
$.fn.setScroll = function(h, o)
{
var offset = o.offset();
if(offset.top > h){
$(this).scrollTop(offset.top - h);
}else{
if(offset .top $(this).scrollTop(0);
}
}
}
})( jQuery);

コードをコピーコードは次のとおりです:

 
#autoComplete_Group { 
border: 1pxソリッド #817F82 ; 
オーバーフロー-y:自動; 
表示:なし; 
#autoComplete_Group テーブル背景: なし繰り返しスクロール 0 0 #FFFFFF; 
カーソル: 
幅: 100%; 
#autoComplete_Group td { 
色: #000000; /25px arial ; 
高さ: 25px; 
パディング: 0 8px; 
#autoComplete_Group 
} 

 




コードをコピー

コードは次のとおりです:

jQuery 模倣 Baidu プロンプトボックス

 
 id="txt_company" type="text" style="width:468px; /> 
 
コードをコピー

 コードは次のとおりです:

protected void Page_Load(object sender, EventArgs e) 
{

string キーワード = Request["txt_company"];
string jsonArray = "[{"text":"Tianian Co., Ltd.","value":"2"}, {"text":"Mingming Co., Ltd.", "value":"4"},{"text":"黄黄有限公司","value":"4"}]";

応答.Write(jsonArray); Response.End() ; } 背景はテキストと値を json 形式で返すだけです。 $.fn.resetEvent(); このメソッドは、イベントを再バインドします。たとえば、あるコンテナから別のコンテナに追加するときにイベントが失われた場合、このメソッドを使用して追加後にイベントを再バインドできます。以下にいくつかのパラメータがあります。

コードをコピー

 コードは次のとおりです:

var defaults = {
width: c.width (), //プロンプトボックスの幅はデフォルトではテキストボックスと同じです
maxheight: 150, //プロンプトボックスの最大高さ
top: 6, //上部テキストボックスからの下の距離

url: "" , //ajax リクエストアドレスtype: "post", //ajax リクエストタイプasync: false, //非同期リクエストするかどうか autoLength: 0, //テキストの長さが 0 より大きい場合、サーバーにリクエストしますgetValue: function(value){ }, //Enter キーを押すかマウスをクリックして値を選択すると実行しますclearValue: function(){ }, //再リクエスト時に値をクリアgetText: function( text){ } //値を入力またはマウスをクリックして選択したときに実行

 
わかりました。 唯一の欠点は、項目をクリックするときにマウスボタンを放さないと、ドロップダウンボックスが非表示になることです。詳細については、私のコードを参照してください。変更できる場合があります。

jQuery プラグインは、Baidu 検索ボックスのスマート プロンプトを模倣します (Value 値を使用)_jquery

jQuery プラグインは、Baidu 検索ボックスのスマートプロンプトを模倣します (Value 値を使用)_jquery