时间戳

首页 > 解决方案 > 如何从数据库中获取大量数据并通过输入输入将其显示到下拉列表过滤器中，但只能从数据库中选择

javascript - 如何从数据库中获取大量数据并通过输入输入将其显示到下拉列表过滤器中，但只能从数据库中选择

问题描述

如何从数据库中获取大量数据并将其显示到下拉列表中。当用户键入任何内容时，通过键入输入通过过滤器相应地获取数据，但数据应该只从数据库中选择或选择，它不应该作为用户输入的文本传递，然后将下拉列表选项的数据放入该用户表中？数据量很大，因此在过滤或输入下拉列表时应该显示大约 10 或 15 个数据。工作应该就像我们在 Facebook 个人资料中选择我们的机构或居住地时一样。在我的代码中。如果在数据库中找不到它，它可以选择文本输入，所以我也想摆脱它。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>    
<script>
  $(function() {
    $( "#autoinput" ).autocomplete({
      source: 'searchuni.php'
    });
  });
  </script>
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 8%;
  right: 1%;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
#autoinput{
    background-image: url(img/uniicon.png);
    background-position: 5px 2px;
    background-repeat: no-repeat;
    text-indent:25px;
  }
//html file element
<input id="autoinput" type="text" name="myUni" placeholder="University/School" required size="55"><span class="tooltiptext"><label name="uninamett">Choose your university by typing name.</label>
//searchuni php file
<?php
    //connect with the database
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
    //get search term
    $searchTerm = $_GET['term'];
   //get matched data from skills table
    $query = $db->query("SELECT * FROM university WHERE uniname LIKE '%".$searchTerm."%' ORDER BY uniname ASC");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['uniname'];
    }
    //return json data
    echo json_encode($data);
?>

标签： javascriptphpjqueryhtmlxampp

解决方案

You can query the database with the user's input on that specific column using the like '%searchValue%' also you can filter the no of records using the limit 10

推荐阅读