Question

我将在这个问题前面提到我对HTML和CSS非常陌生这一事实。

我目前在我的公司有一个工程页面，我继承了它有很多链接。我已经组织成一些一般类别。但是，有人表示他们会喜欢搜索框搜索链接。

由于我无法控制的情况，我没有PHP可用。我所拥有的是我的index.html文件中的所有链接以及它们显示的文本。

我认为我可以创建引擎以识别标记，然后搜索与标记中链接相关联的“名称”。但是，我真的不知道在实现这样一个脚本方面从哪里开始。

当然，可能有一种更简单的方法。我对任何新方法持开放态度。我并不偏向任何编程方法或语言。非常感谢大家的帮助，我可以提供任何其他非NDA信息。

Answer 1

您需要在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

现在，您可以使用该链接执行操作，例如显示或导航到该链接。

Answer 2

我会看一下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>

这样做意味着您必须在javascript变量中保留单独的URL和文本列表。

使用html文件中的链接创建搜索框？

2 个答案: