Nano Hash - криптовалюты, майнинг, программирование

Создайте базовый список предложений автозаполнения

Как я могу создать список предложений автозаполнения под окном поиска, который:

  1. Пользователи могут использовать клавиши клавиатуры Down и Up для перехода между ними?

  2. Пользователи могут использовать кнопку Esc, чтобы закрыть список предложений?

  3. Когда пользователи нажимают на клавиатуре клавишу Down или Up, выбранное предложение будет заполнено в поле поиска?

Это мой текущий код для index.php:

<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
    <head>
        <title>
            Brandon's Search Engine
        </title>
        <style type="text/css">
            #suggestion {
                border: 1px solid black;
                visibility: hidden;
                position: absolute;
                background-color: white;
                z-index: 10;
            }
            #suggestion a {
                font-size: 12pt;
                color: black;
                text-decoration: none;
                display: block;
                width: 648px;
                height: auto;
                text-align: left;
                padding: 2px;
            }
            #suggestion a:hover {
                background-color: #dddddd;
                width: 644px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <form method="GET" action="search.php" name="q">
            <table align="center">
                <tr>
                    <td>
                        <h1><center>Brandon's Search Engine</center></h1>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
                               onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="closeBox()"/>

                        <div id="suggestion" style="width: 648px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                        <input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        Can't find your site? <br /> Insert <a href="insert.php">here</a>.
                    </td>
                </tr>
            </table>
            <input type="hidden" name="page" value="1" />
        </form>
    </body>
</html>

Заранее спасибо.

php autocomplete autosuggest search-engine
27.12.2013

  • jqueryui.com/autocomplete 27.12.2013
  • Я пробовал это, но я не знаю, как использовать это в моем коде. 27.12.2013
  • Покажите нам, как вы пытались, и мы можем сделать предложения оттуда 27.12.2013
  • pastebin.com/Ri8715Gc 27.12.2013
  • @Rob Роб, я дал тебе мой код предложения. Можешь помочь мне сейчас? 27.12.2013
  • jqueryui.com/autocomplete/#remote 27.12.2013

Ответы:


1

Используйте Jquery UI AutoComplete, вот пример кода

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {

  var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

Пример взят из - http://jqueryui.com/autocomplete/

    /**
         This code below loads the autocomplete for your input field,
         where in "#tags" is the id of your element where this should
         be displayed in and "availableTags" is the array of list of
         possible values to be shown in autocomplete list
     */
     $( "#tags" ).autocomplete({
      source: availableTags
    });

Если вы хотите динамически получать данные через PHP, которые хранятся в базе данных, вы можете использовать http://jqueryui.com/autocomplete/#remote

27.12.2013
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..