2016-05-23 122 views
-5

我在ASP.NET中建立一個搜索引擎,它將顯示產品不是鏈接,我的問題是什麼是技巧或JavaScript功能,當用戶鍵入他的搜索時,搜索欄出現在頂部結果像谷歌,我希望在我的搜索引擎的功能製作搜索引擎喜歡谷歌

+0

不知道你是什麼之後。它是自動完成功能嗎?你能詳細說明嗎? –

+0

我的意思是,它是一個非常具體的行動。我不認爲有一個'技巧'或通用的JavaScript功能來做到這一點。你只需要編寫代碼。 – Jonesopolis

+0

你有截圖解釋嗎? –

回答

0

$("header input").on("input", function(){ 
 
    if(this.value.length > 0){ 
 
    $("header").addClass("hasValue"); 
 
    } 
 
});
*{box-sizing: border-box; margin:0;} 
 

 
header{ 
 
    position: absolute; 
 
    top:50%; left:50%; 
 
    transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    padding: 16px 24px; 
 
} 
 
header input{ 
 
    display: block; 
 
    vertical-align: top; 
 
    padding: 8px; 
 
    border-radius: 3px; 
 
    border:1px solid #ccc; 
 
} 
 
/* ONCE INPUT HAS VALUE: */ 
 
header.hasValue{ 
 
    position:relative; 
 
    top:0; left:0; 
 
    transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); 
 
    text-align:left; 
 
    background:#eee; 
 
} 
 
header.hasValue input{ 
 
    display:inline-block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <img src="//placehold.it/80x33/f0f/fff?text=LOGO" alt="LOGO"> 
 
    <input type="search" placeholder="Search products"> 
 
</header>

+1

感謝您瞭解我想問什麼 –

+1

@MuhammadMateen不用客氣。請下一次顯示一些HTML,你嘗試過的CSS,會更容易從某處開始,而不是從頭開始!快樂編碼 –

+0

J查詢不適用於我我猜或我的CSS是錯誤的,我也安裝了j查詢在我的項目中,並將其粘貼到我的頭文件在asp.net項目中,但每當我寫了東西,什麼也沒有發生, t知道爲什麼 我認爲j查詢裏面的腳本標記不適用於我或請幫助 –

0

我不知道你是如何在電子商務門戶網站建設的搜索引擎,也沒有落後,任何伎倆。你可以用各種方法實現類似的功能。我建議看看基礎知識。

https://jqueryui.com/autocomplete/