0

我在我的一个页面中使用了一个自动建议脚本（使用 jquery、ajax、php 和 mysql）并且效果很好。

但是当我尝试在同一页面上为另一个表单（文本输入）添加自动建议时，我遇到了很多错误，它显示了正确的信息，但是当我单击它们填充第一个输入时，我尝试修改一些变量，但现在它第二个输入根本不起作用。我对 JS、Jquery、Ajax 真的很陌生（以前从未使用过）。

这是包含输入 (Test.html) 的页面的代码。

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">
</script>
<script>
function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
    $('#country').addClass('load');
        $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#country').removeClass('load');
            }
        });
    }
}

function fill(thisValue) {
    $('#country').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 600);
}


#result {
height:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:5px;
margin-bottom:10px;
background-color:#FFFF99;
}
#country{
padding:3px;
border:1px #CCC solid;
font-size:17px;
}
.suggestionsBox {
position: absolute;
left: 0px;
top:40px;
margin: 26px 0px 0px 0px;
width: 200px;
padding:0px;
background-color: #000;
border-top: 3px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
.suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
padding:0;
margin:0;
}

.load{
background-image:url(loader.gif);
background-position:right;
 background-repeat:no-repeat;
}

#suggest {
position:relative;
}

</style>
</head>
<body>

<form id="form" action="#">
<div id="suggest">type a country: <br />
  <input type="text" size="25" value="" id="country" onkeyup="suggest(this.value);"    onblur="fill();" class="" />

  <div class="suggestionsBox" id="suggestions" style="display: none;"> <img   src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
  </div>
</div>
<div id="suggestcity">type a city: <br />
  <input type="text" size="25" value="" id="city" class="" />
</div>
</form>
</body>
</html>

我的 autosuggest.php 的代码是

<?php
$db_host = '';
$db_username = '';
$db_password = '';
$db_name = '';

$db = new mysqli($db_host, $db_username ,$db_password, $db_name);

if(!$db) {
       $db->set_charset("utf8");
    echo 'Could not connect to the database.';
} else {

    if(isset($_POST['queryString'])) {
        $queryString = $db->real_escape_string($_POST['queryString']);

        if(strlen($queryString) >0) {
            $db->set_charset("utf8");
            $query = $db->query("SELECT Ville FROM Villes WHERE Ville LIKE '$queryString%' LIMIT 10");
            if($query) {
            echo '<ul>';
                while ($result = $query ->fetch_object()) {
                    echo '<li onClick="fill(\''.addslashes($result->Ville).'\');">'.$result->Ville.'</li>';
                }
            echo '</ul>';

            } else {
                echo 'OOPS we had a problem :(';
            }
        } else {
            // do nothing
        }
    } else {
        echo 'There should be no direct access to this script!';
    }
}
?>

所以我的问题是，我应该在两个页面中更改什么（变量和函数等...），以便我可以在第二个输入上使用自动建议，其中 id="city" 来自同一数据库上的另一个表。

如果您能提供帮助，那就太好了，在过去的几天里，我一直在尝试修改代码上的任何内容，但没有任何效果。非常感谢你

4

1 回答 1

2

使用自动建议，这将使您的生活更轻松。http://jqueryui.com/autocomplete/

于 2013-03-12T09:00:18.450 回答