Как украсить JavaScript в HTML? - PullRequest
Новая
       4

Как украсить JavaScript в HTML?

0 голосов
/ 19 июня 2020

Я создал завершитель слов. Я использую Bootstrap, но я не могу повлиять на результат. Я использую для программы jQuery и JavaScript. Результаты появятся в списке. Не знаю, как это исправить.

webpage

Вот мой код.

word_finder. html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Autocomplete Sentences</title>

  <!-- Libraries -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



  <script>
  $( function() {
    var availableTags = [
      "Apple",
     ...
      "Python",
      "Ruby",
      "Scala",
      "Scheme",
      "Türk Hava Kurumu Üniversitesi"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>


<div class="ui-widget">
    <h1 style="color: purple;"> Word Finder </h1>
    <br>
  <p class=" lead text-primary">Welcome. As you start writing, suggestions will start to appear. </p>
  <label for="tags">Start typing </label>
  <input id="tags" class="form-control" style=" position: center;">
</div>

</body>
<style> ... <style>
</html>

1 Ответ

0 голосов
/ 23 июня 2020

Учитывая, что вы используете автозаполнение jQuery, оно предоставляет теги автозаполнения после ваших: 

  <input id="tags" class="form-control" style=" position: center;">

Теги HTML: 

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui- 
   autocomplete ui-front" style="display: block;top: 32px;left: 
   50.6875px;width: 170px;">
   <li class="ui-menu-item"></li>
</ul>

вы можете оформить раскрывающийся список ul с помощью используя

любой из классов отсюда 

ui-menu ui-widget ui-widget-content ui-autocomplete ui-front

для li используйте класс "ui-menu-item" для стиля 

<style>
.ui-autocomplete {
   background-color: red;
}
.ui-autocomplete .ui-menu-item {
   color: #FFF;
}
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...