使用 html 文件中的链接创建搜索框？
我将用我对 HTML 和 CSS 非常陌生的事实来回答这个问题。
目前，我继承的公司有一个工程页面，其中包含大量链接。我已将其分为一些一般类别。然而，有人表示他们希望有一个搜索框来搜索链接。
由于我无法控制的情况，我无法使用 PHP。我所拥有的是我的index.html 文件中的所有链接以及它们显示的与其关联的文本。
我认为我可以创建引擎，使其识别标签，然后搜索与标签中的链接关联的“名称”。但是，我真的不知道从哪里开始实现这样的脚本。
当然，可能还有更简单的方法。我对任何新方法持开放态度。我对任何编程方法或语言都没有偏见。非常感谢大家的帮助，我可以提供任何其他非保密信息。
I will preface this question with the fact that I am extremely new to HTML and CSS.
I currently have an engineering page at my company I have inherited that has a ton of links. I have organized into some general categories. However, it has been expressed that they would love a searchbox to search links.
I do not have PHP available to me due to circumstances out of my control. What I do have is all the links in my index.html file with the text they display associated with them.
My thought it that I can create the engine such that it recognizes the tag, and then searches the "name" associated with the link in the tag. However, I really have no idea where to start in terms of implementing such a script.
Of course, there may be a much easier way. I am open to any new approaches. I am not biased toward any programming method or language. Thank you so much for the help everyone, and I can provide any other non-NDA information I can.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（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 和文本列表。
I would look at the jQuery UI Automcomplete library http://jqueryui.com/demos/autocomplete/, specifically the custom data demo.
I imagine the code something like this (note this is untested and definitely not complete for your purposes):
<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>Doing it this way does mean you have to keep a separate list of URLs and text in a javascript variable.
您需要在 index.html 中包含 jQuery。
为每个链接指定一个公共类。然后，您可以使用 jQuery 查找用户正在搜索的链接：
现在您可以使用该链接执行某些操作，例如显示它或导航到它。
You'll need to include jQuery in your index.html.
Give each link a common class. You can then use jQuery to find the link the user is searching for:
Now you can do things with that link, like show it or navigate to it.