对自动完成字段使用 MySQL

Question

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

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

Answer 1

如果您正在使用 bootstrap（如果您没有使用，则应该这样做）您可以使用提前输入。 (google typeahead.bundle.js)
在 bootstrap.

之后调用此 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 );

对自动完成字段使用 MySQL

Using MySQL for autocomplete fields

mysql

mariadb