Создание окна поиска с использованием ссылок в HTML-файл? - PullRequest
Новая
       23

Создание окна поиска с использованием ссылок в HTML-файл?

0 голосов
/ 30 сентября 2011

Я предвожу этот вопрос тем фактом, что я чрезвычайно новичок в HTML и CSS.

В настоящее время у меня есть инженерная страница в моей компании, которую я унаследовал и которая содержит массу ссылок.Я организовал в несколько общих категорий.Тем не менее, было высказано мнение, что они хотели бы, чтобы окно поиска использовалось для поиска ссылок.

У меня нет доступного мне PHP из-за не зависящих от меня обстоятельств.У меня есть все ссылки в моем файле index.html с текстом, который они отображают, связанный с ними.

Я думал, что смогу создать движок, который распознает тег, а затем выполнит поиск "имя "связано со ссылкой в ​​теге.Тем не менее, я действительно не знаю, с чего начать с точки зрения реализации такого скрипта.

Конечно, может быть гораздо более простой способ.Я открыт для любых новых подходов.Я не склонен к какому-либо методу программирования или языку.Огромное спасибо за помощь всем, и я могу предоставить любую другую информацию, не относящуюся к NDA, которую я могу.

Ответы [ 2 ]

0 голосов
/ 30 сентября 2011

Я бы посмотрел библиотеку автозаполнения пользовательского интерфейса jQuery 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 + '&lt/a>' )
      .appendTo( ul );
};


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

Делая это таким образом, вы должны хранить отдельный список URL-адресов и текста в переменной javascript.

0 голосов
/ 30 сентября 2011

Вам нужно будет включить jQuery в ваш index.html. 

<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

Теперь вы можете делать что-то с этой ссылкой, например, показать ее или перейти к ней.

...