Блог

Я новичок в веб-разработке, и я создавал веб-сайт для семейного бизнеса. Мы являемся аптекой по рецептуре, и я хотел бы внедрить функцию для наших врачей-клиентов, позволяющую отправлять новые рецепты онлайн, а также получать ценовые предложения по нашим формулам. У меня уже есть страница для формы заказа, однако я хочу сделать поле «Лекарство» автозаполняемым, используя нашу базу данных формул.

У меня есть база данных MySQL (MariaDB на сервере Fedora), уже настроенная и готовая к запросу. Я не уверен, как добиться автозаполнения поля. Я видел реализации javascript-системы Typeahead от Twitter, но я не смог следовать руководству, поскольку у меня нет опыта работы с JS.

Если вы используете bootstrap (вы должны, если вы этого не делаете) Вы можете использовать typeahead. (google typeahead.bundle.js
Вызовите этот файл javascript после начальной загрузки.

Тогда вам понадобится немного CSS

 <style>
.typeahead,
.tt-query,
.tt-hint {

  font-size: 12px;

}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}   
  

Затем вам нужны входные

 <input id="mytextquery" name="mytextquery" type="text" size="71" maxlength="128" value="" placeholder="Carrier (type to search)" class="form-control typeahead"/>
  

Затем немного javascript на странице.

 <script>
  $(function () {
    $('#mytextquery').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      limit: 12,
      async: true,
      source: function (query, processSync, processAsync) {

        return $.ajax({
          url: "typeTest.php", 
          type: 'GET',
          data: {query: query},
          dataType: 'json',
          success: function (json) {
            // in this example, json is simply an array of strings
            return processAsync(json);
          }
        });
      }
    }); 

  });
</script>
  

Затем какой-нибудь php или что-то еще, что вы используете для получения данных из вашей базы данных

 $query = $_GET['query'];
//Do your SQL query here
$query = "SELECT * from table where field LIKE '$query'";
//Get results and format like below
$data1 = [ 'Item 1', 'Item 2', 'Item 3' ,'etc', 'etc'];

//Export it so typeahead can read it.
header('Content-type: application/json');

  echo json_encode( $data1 );