使用html文件中的鏈接創建搜索框？

我將以這樣一個事實來描述這個問題，即我對HTML和CSS非常陌生。使用html文件中的鏈接創建搜索框？

我目前在我的公司有一個工程頁面，我繼承了一大堆鏈接。我已經組織成一些一般類別。但是，有人表示他們會喜歡搜索框來搜索鏈接。

由於我無法控制的情況，我沒有PHP可用。我所做的是我的index.html文件中的所有鏈接，並顯示與它們相關聯的文本。

我認爲我可以創建引擎以識別標籤，然後搜索與標籤中鏈接關聯的「名稱」。但是，我真的不知道從哪裏開始實施這樣的腳本。

當然，可能有一個更簡單的方法。我願意接受任何新的方法。我不偏向任何編程方法或語言。非常感謝大家的幫助，我可以提供任何其他非NDA信息。

來源

2011-09-30 pacman326

你能不能按照字母順序排列它們，並在每個鏈接頁面的頂部有一個A-Z導航？ – user466764

這是一種可能性。然而，大多數人似乎使用該頁面的方式是一個control-f搜索。好的建議，但我也可以實施。 – pacman326

我會看看jQuery UI Automcomplete庫http://jqueryui.com/demos/autocomplete/，特別是自定義數據演示。

我想象中的代碼是這樣的（注意，這是未經檢驗的，絕對不是完全適合您的需要）：

 
<head> 
<script type='text/javascript'> 
var urls = [ 
    { 
     value: "url-text", 
     label: "URL Text", 
     desc: "URL" 
    }, 
    { 
     value: "url2-text", 
     label: "URL2 Text", 
     desc: "URL2" 
    } 
]; 

$('#search').autocomplete({ 
    minLength: 0, 
    source: urls, 
    focus: function (event, ui) { 
     $('#search').val(ui.item.label); 
     return false; 
    }, 
    select: function (event, ui) { 
     $('#search').val(ui.item.label); 
     $('#url').val(ui.item.desc); 
     return false; 
    } 
}) 
.data ("autocomplete")._renderItem= function(ul,item) { 
    return $('<li></li>") 
     .data('item.autocomplete', item) 
     .append('<a>' + item.label + '<br />' + item.desc + '</a>') 
     .appendTo(ul); 
}; 


</script> 
</head> 
<body> 
<input id="search" /> 
<p id='url'></p> 
</body>

這樣做，這樣是否意味着你必須保持URL和文字的單獨列表中一個JavaScript變量。

來源

2011-09-30 15:49:03 Tom

因此，基本上對於var url部分，我需要通過其可搜索的名稱和url來定義每個鏈接？ – pacman326

是的。搜索然後搜索「標籤」文本，並顯示「desc」文本。 – Tom

您需要在index.html中包含jQuery。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' />

給每個鏈接一個普通的類。然後，您可以使用jQuery找到用戶搜索的鏈接：

var search = $("#searchBox").val(); 
$("a.myLinks[href*="+search+"]"); // uses jQuery to select the link, see jQuery selectors

現在你可以做的事情與該鏈接，像表演，或導航。

來源

2011-09-30 15:45:29 jtfairbank

使用html文件中的鏈接創建搜索框？

回答

相關問題