Question

您好我需要在materializecss页面中进行自动完成输入，

我尝试使用此代码，但是没有工作，你们中有人知道如何实现这一目标：https://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/

....
  <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>
...

Answer 1

这样的事情怎么样：当您使用materialize css框架在输入框中输入内容时，此摘要的结果将提示国家名称。

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();

希望这对您有所帮助，我知道这篇文章的年龄，但是我想帮助其他遇到此问题的新手。

谢谢?

MaterialiseCSS自动完成PHP MySQL

1 个答案: