我有一個空白的搜索欄，然後在桌子下面的聯繫人的一個頁面。每個聯繫人都是一個div。PHP/Javascript - 即時搜索，但不同？
我希望能夠在文本輸入搜索欄時過濾聯繫人表。 （所以，例如，如果在搜索欄中輸入「Fran」，則只會在他們的名字中看到帶有「Fran」的聯繫人，然後如果刪除「Fran」，所有人都會回到默認狀態。）
這可能嗎？怎麼樣？（我發現了一個即時搜索diy指南，但它只有Google的工作方式，在搜索欄下方有一個下拉菜單。）
我建議使用this jquery plugin，它不需要ajax或服務器通信，它只是過濾一個在每次擊鍵時根據輸入框內容呈現表格。
確保在您的項目中包含jquery庫以及此插件以使其工作。
您可以嘗試的jQuery auto complete plugin爲同一
下包含你所需要雖然它的反面上的基本邏輯 - 它隱藏它找到，只有精確匹配的內容。此外，它是一個按鍵事件，所以它只在輸入名稱後點擊空格後才隱藏div，所以你也需要調整它。 要在一長串文本內查找匹配項，您需要使用一些正則表達式來針對搜索字符串進行測試。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$(".searchbox").keypress(function(){
$("div").each(function(){
if($(this).text() == $(".searchbox").val()){
$(this).hide("fast");
};
});
});
});
</script>
</head>
<body>
<form><input type="text" class="searchbox"></form>
<div>Susan</div>
<div>Fran</div>
<div>Dave</div>
</body>
</head>
</html>
下面是一些對你的JavaScript示例：
<script type="text/javascript">
$(document).ready(function() {
$("#search").keyup(function() {
// Get the search value
var searchValue = $(this).val();
// If no value exists then show all divs
if(searchValue === "") {
$(".your_div").show();
return;
}
// Initially hide all divs
$(".your_div").hide();
// Now show any that contain the search value
$(".your_div:contains('" + searchValue + "').show();
});
});
</script>
我不認爲這也適用，如文章作者寫道：「我發現了一個即時搜索的DIY指南，但它只是工作方式谷歌做的，在搜索欄下面有一個下拉菜單「 – huyz 2011-06-02 08:48:51