Home/ Questions/Q 6671683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:25:04+00:00

I will preface this question with the fact that I am extremely new to

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 + '&lt/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.

    • 0