Question

我是网络开发的新手，我一直在为家族企业创建一个网站。我们是一家复合药房，我希望为我们的客户医生实施一项功能，以便在线提交新的处方，并获得我们公式的报价。我有已经制作的订单的页面，但我想制作＆＃34; Drug＆＃34;使用我们的公式数据库进行字段自动完成。

我已经设置了MySQL（Fedora Server上的MariaDB）数据库并准备好进行查询。我不确定如何让字段自动完成。我已经看到了Twitter的Typeahead javascript系统的实现，但由于我没有使用JS的经验，所以我无法遵循该教程。

Answer 1

如果您使用的是bootstrap（如果您不是，那就应该这样）你可以使用typeahead。（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进行自动填充字段

1 个答案: