Question

我在这里从jquery.com自动完成。而不是使变量显示在自动完成中。我想从数据库记录中显示自动完成功能。我只希望在自动填充中显示基于下拉选项值的记录。这该怎么做？请帮我。我被困在这里。

这就是我现在所拥有的。但如果比较值来自期权价值怎么办？

$(document).ready(function(){
 $("#tag").autocomplete("autocomplete.php", {
        selectFirst: true
    });
});

这是我的autocomplete.php

<?php
    $mysqli = new mysqli("localhost", "root", "", "2015") or die("Database Error");
    $auto = $mysqli->real_escape_string($_GET["q"]);
    $sql = $mysqli->query("SELECT * FROM code WHERE item LIKE '%$auto%' GROUP BY id ORDER BY item" ); 

    if($sql)
    {
        while($row=mysqli_fetch_array($sql))
        {
            echo $row['item']."\n";
        }
    }
?>

这是自动填充代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>

<select id="main" name="main">
<option value="" disabled="disabled" selected="selected">Choose</option>
<?php echo $option; ?>
</select>

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

Answer 1

HTML应该是

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tags" ).autocomplete({
source: 'yourPHPFile.php?'
});
});
function changeAutoComplete (val) {
    $( "#tags" ).autocomplete({
        source: 'yourPHPFile.php?selected='+val
    });
}
</script>
</head>
<body>

<select id="main" name="main" onchange="changeAutoCompete(this.value)">
<option value=""  selected="selected">Choose</option>
<?php echo $option; ?>
</select>

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

PHP应该是这样的。

<?php
    $mysqli = new mysqli("localhost", "root", "", "2015") or die("Database Error");
    $auto = $mysqli->real_escape_string($_GET["term"]);
    $selected = $mysqli->real_escape_string($_GET["selected"]);
    $sql = $mysqli->query("SELECT * FROM code WHERE item LIKE '%$auto%' AND selected='$selected' GROUP BY id ORDER BY item" ); 

    if($sql)
    {
        $str = array();
        while($row=mysqli_fetch_array($sql))
        {
            $str[] = $row['item'];
        }
        echo json_encode($str);
    }
?>

Answer 2

使用基本HTML即可轻松完成。

<input list="languages">
<datalist id="languages">
  <option value="Dutch">
  <option value="English">
  <option value="German">
  <option value="Chinese">
  <option value="Swedish">
</datalist>

Fiddle demo

基于期权价值的自动完成

2 个答案: