mysql - 将 MySQL 用于自动完成字段

Question

我是网络开发新手，一直在为家族企业创建网站。我们是一家复合药房，我想为我们的客户医生实现一项功能，以便在线提交新处方以及获取我们配方的报价。我已经制作了订单页面，但是我想使用我们的配方数据库使“药物”字段自动完成。

我已经设置了一个 MySQL(Fedora 服务器上的 MariaDB)数据库并准备好进行查询。我不确定如何让该字段自动完成。我看过 Twitter 的 Typeahead javascript 系统的实现，但由于我没有使用 JS 的经验，所以无法按照教程进行操作。

Answer 1

如果你正在使用 bootstrap(如果你没有，你应该这样做)您可以使用提前输入。 (谷歌 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 );