Creating search box using links in html file?_问答_开发者

Creating search box using links in html file?

开发者 https://www.devze.com 2023-04-09 22:33 出处：网络

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

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.

M开发者_运维技巧y 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.

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.

You'll need to include jQuery in your index.html.

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

Give each link a common class. You can then use jQuery to find the link the user is searching for:

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

Now you can do things with that link, like show it or navigate to it.

Creating search box using links in html file?

精彩评论

关注公众号

热门标签

图文推荐

Creating search box using links in html file?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：