MaterializeCSS 自动完成 PHP MySQL答案

【问题标题】：MaterializeCSS Autocomplete PHP MySQLMaterializeCSS 自动完成 PHP MySQL
【发布时间】：2020-07-04 08:50:50
【问题描述】：

我需要在具体化 css 页面中进行自动完成输入，

我已经尝试过这段代码，但没有奏效。您知道如何使这成为可能吗？

从这里Autocomplete Textbox using jQuery, PHP and MySQL

index.php

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <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() {
    $( "#skills" ).autocomplete({
      source: 'search.php'
    });
  });
  </script>
</head>
<body>
  <div class="ui-widget">
    <label for="skills">Skills: </label>
    <input id="skills" type="text">
  </div>

search.php

<?php 
$dbHost = 'localhost'; 
$dbUsername = 'u969692298_dogs'; 
$dbPassword = 'dogs123'; 
$dbName = 'u969692298_dogs'; 
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 
$searchTerm = $_GET['term']; 
$query = $db->query("SELECT * FROM kennels WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC"); 
while ($row = $query->fetch_assoc()) { 
  $data[] = $row['name'];
} 
echo json_encode($data); 
?>

【问题讨论】：

search.php 存在吗？如果是这样，请发布代码。
效果很好，但是 index.php 不起作用 query("SELECT * FROM kennels WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC"); while ($row = $query->fetch_assoc()) { $data[] = $row['name']; } 回声 json_encode($data); ?>
更多信息请查看此链接codexworld.com/autocomplete-textbox-using-jquery-php-mysql
没有materializecss的页面：prntscr.com/fvf6yp，有materializecss的页面：prntscr.com/fvf76x
请回答我的问题，search.php 存在吗？您现在正在谈论index.php，也许您需要重命名它？或更改代码。

标签： php jquery mysql autocomplete materialize

【解决方案1】：

这样的事情怎么样：当您开始使用 materialize css 框架在输入框中输入时，此 sn-p 的结果会建议国家名称。

API GET 请求示例

  $(document).ready(function() {
  //Autocomplete
  $(function() {
    $.ajax({
      type: 'GET',
      url: 'https://restcountries.eu/rest/v2/all?fields=name',
      success: function(response) {
        var countryArray = response;
        var dataCountry = {};
        for (var i = 0; i < countryArray.length; i++) {
          //console.log(countryArray[i].name);
          dataCountry[countryArray[i].name] = countryArray[i].flag; //countryArray[i].flag or null
        }
        $('input.autocomplete').autocomplete({
          data: dataCountry,
          limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
        });
      }
    });
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

<div class="row">
  <div class="col s12">
    <div class="input-field">
      <input type="text" id="autocomplete-input" class="autocomplete" autocomplete="off" name="name">
      <label for="autocomplete-input">Country Name</label>
    </div>
  </div>
</div>

Jaikhlang Brahma answer以上代码

POST 请求示例

jQuery

$(document).ready(function() {
  //Autocomplete
  var inp_val = document.getElementById("myInput").value;

  var dataString = "name="+inp_val;
 
  $(function() {
    $.ajax({
      type: 'POST',
      url: 'suggest-country.php',
      data: dataString,
      success: function(response) {
        var countryArray = response;
        var dataCountry = {};
        for (var i = 0; i < countryArray.length; i++) {
          //console.log(countryArray[i].name);
          dataCountry[countryArray[i].name] = countryArray[i].flag; //countryArray[i].flag or null
        }
        $('input.autocomplete').autocomplete({
          data: dataCountry,
          limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
        });
      }
    });
  });
});

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<div class="row">
  <div class="col s12">
    <div class="input-field">
      <input type="text" id="autocomplete-input" class="autocomplete" autocomplete="off" name="name">
      <label for="autocomplete-input">Country Name</label>
    </div>
  </div>
</div>

PHP (suggest-country.php)

<?
header('Content-type: text/html; charset=UTF-8');
$dbHost = 'localhost'; 
$dbUsername = 'u969692298_dogs'; 
$dbPassword = 'dogs123'; 
$dbName = 'u969692298_dogs'; 
$conn = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 
$query = trim(str_replace("  ", " ", $_POST['name']));
$str = htmlspecialchars($query);
$q = filter_var($str, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$sql = $conn->prepare("SELECT * FROM kennels WHERE name = ? ORDER BY name ASC"); 
$sql->bind_param("s", $q);
$sql->execute();
$rs = $sql->get_result();
$arr = array();
while($row = $rs->fetch_assoc()){
 $arr["name"] .= $row["name"];
 $arr["flag"] .= $row["flag"];
}
// echo "<pre>".json_encode($arr)."</pre>";
echo json_encode($arr);
?>

这个PHP 代码非常安全且运行良好。如需更多相关性，请使用 MYSQL FULL TEXT SEARCH 或替换此 SQL 查询

$sql = $conn->prepare("SELECT * FROM kennels WHERE name = ? ORDER BY name ASC"); 
$sql->bind_param("s", $q);
$sql->execute();

到这里

$sql = $conn->prepare("SELECT *, " . " MATCH(name) AGAINST(? IN BOOLEAN MODE) AS relevance " . " FROM kennels" . " ORDER BY relevance DESC LIMIT 8"); 
$sql->bind_param("s", $q);
$sql->execute();
$rs = $sql->get_result();

希望这对你有帮助，我知道这篇文章有多老了，但我想帮助其他遇到这个问题的新手。

谢谢?

【讨论】：