控件實現自動完成搜索引擎

我組建了一個搜索引擎。我需要一個文本字段（帶有自動完成功能）和一個搜索按鈕。（單擊搜索按鈕提交表單）。控件實現自動完成搜索引擎

有很多javascript自動完成解決方案（有些列在http://webtecker.com/2008/03/10/10-auto-complete-ajax-scripts），但我需要一個與搜索按鈕協同工作的解決方案。

具體來說，我正在尋找模仿Firefox瀏覽器的搜索欄提供的功能...當文本字段的用戶類型，自動完成呈現一個下拉式建議一個JavaScript小部件。如果用戶按下回車鍵（例如，沒有觸摸下拉列表），則表單被提交（就像點擊了「搜索」按鈕一樣），以及用戶在文本字段中鍵入的內容是提交給表單的值。或者，如果用戶從自動完成下拉列表中選擇一個值（通過鍵盤或鼠標），那麼文本字段的值將被設置爲自動完成選擇，並且表單被提交（就像單擊「搜索」按鈕一樣）。

我已經有一個生成的自動完成建議服務器端後端代碼。

來源

2009-10-07 Mike W

如果你使用jQuery或不介意使用它，這autocomplete plugin的作品一樣，倒也可定製。

編輯

你需要數據的源自動完成的提示 - 您如何發展，這是你來決定。讓我們暫時假裝你的整個搜索建議是一個月的列表。而你的表單會在Google上搜索這些建議。

這裏有一個提示頁面可能是什麼樣子（在PHP）

hint.php

<?php 

$query = $_GET['q']; 

$monthList = array(
    'January' 
    , 'February' 
    , 'March' 
    , 'April' 
    , 'May' 
    , 'June' 
    , 'July' 
    , 'August' 
    , 'September' 
    , 'October' 
    , 'November' 
    , 'December' 
); 

if (preg_match_all("/^" . preg_quote($query) . ".*$/im", implode("\n", $monthList), $matches)) 
{ 
    echo implode("\n", $matches[0]); 
}

所以，現在我們只需要在自動完成域中掛接到這個頁面，因爲它的來源建議。

<html> 
<head> 
    <title>Test Page</title> 
    <link rel="stylesheet" href="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
    <script type="text/javascript"> 
     $(function() 
    { 
     $('#search').autocomplete('test.php', {}).result(function(data, value) 
     { 
     $(this)[0].form.submit(); 
     });    
    }); 
    </script> 
</head> 

<body> 

<form action="http://www.google.com/search"> 

<input type="text" id="search" name="q"/><input type="submit" value="Search"> 

</form> 

</body> 
</html>

當然，您的搜索終端不一定是谷歌 - 可以是任何其他搜索，包括您自己的搜索。

來源

2009-10-07 18:53:26

真的嗎？我沒有看到任何使JQuery自動完成插件與搜索按鈕協同工作的方法。你能指點我一個例子嗎？ –

這取決於你的實施。我會用一個例子來修改我的答案。 –

不過，我的問題是如何讓自動完成與文本字段和搜索按鈕進行交互。你的例子沒有解決搜索按鈕，所以它不是很有用。 –

控件實現自動完成搜索引擎

回答

相關問題