Question

我使用php页面作为数据源使用jquery自动完成。我在Safari 5.1.9，Caminio 2.1.2和不锈钢0.8（所有在Mac上）都尝试过。自动完成功能无效!!!

请帮忙！

我研究了这个并看到了许多类似的问题，但没有解决方案。我不知道它是HTML 5还是什么......

我按照这里的例子：http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

我使用的是jquery 1.8.3和jquery-ui 1.9.2，因为jquery 1.9+打破了网站的一个主要组成部分。

这是我的索引（index.php）页面的代码：

<?php require_once "connectToDatabase.php"; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - PHP Example</title>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<script type="text/javascript">
$(function() {

    $('#abbrev').val("");

    $("#state").autocomplete({
        source: "states.php",
        minLength: 2,
        select: function(event, ui) {
            $('#state_id').val(ui.item.id);
            $('#abbrev').val(ui.item.abbrev);
        } //function(event, ui)
    }); //$("#state").autocomplete

    $("#state_abbrev").autocomplete({
        source: "states_abbrev.php",
        minLength: 2
    }); //("#state_abbrev").autocomplete

}); //function

</script>
</head>
<body>
<div class="container">   
<div class="hero-unit">
<h1>jQuery UI Autocomplete</h1>
<p>This example will use US states and territories to populate the autocomplete. It will also demonstrate how to fill other fields with data returned from the database. This data can be used to fill a visible text box or a hidden form field. It also demonstrates the basic autocomplete functionality which may be fine for some applications.</p>
<h2>Start typing the name of a state or territory of the United States</h2>

<form class="form-horizontal" id="autocompleteForm" name="autocompleteForm" action=""  method="post">
<fieldset>

<div class="control-group">
<label for="state">State (abbreviation in separate field): </label>
<div class="controls">  
<input type="text" id="state"  name="state" /> <input readonly="readonly" type="text" id="abbrev" name="abbrev" maxlength="2" size="2"/>
<input type="hidden" id="state_id" name="state_id" />
<input type="hidden" id="form_submitted" name="form_submitted" value="true" />

</div>
</div>
<div class="control-group">
<label for="state_abbrev">State (replaced with abbreviation): </label>
<div class="controls">  
<input type="text" id="state_abbrev" name="state_abbrev" />
</div>
</div>
<div class="form-actions">

<input class="btn btn-primary" type="submit" name="submitBtn" value="Submit" />
</div>
</fieldset>
</form>

</div>

    <?php
if (isset($_POST['submit'])) {
echo "<p>";
    while (list($key,$value) = each($_POST)){
    echo "<strong>" . $key . "</strong> = ".$value."<br />";
    }
echo "</p>";
}
?>

</div>
</body>
</html>

这是第一个php源页面（states.php）的代码：

<?php require_once "connectToDatabase.php"; ?>

<script>
function notSet(){
        var answer = confirm('NOT SET');
} 
function set(){
        var answer = confirm('IS SET');
}
</script>

<?php

if ( !isset($_GET['term']) ){
    echo '<script type="text/javascript">'
    , 'notSet();'
    , '</script>';
    exit;
} //if

echo '<script type="text/javascript">'
   , 'notSet();'
   , '</script>';

try {
    $conn = connectionFunction();
} //try
catch(PDOException $e) {
    echo $e->getMessage();
} //catch

$return_arr = array();

if ($conn){
    //$ac_term = "%".$_GET['term']."%";
    $ac_term = $_GET['term']."%";
    $query = "SELECT * FROM states where state like :term";
    $result = $conn->prepare($query);
    $result->bindValue(":term",$ac_term);
    $result->execute();

    /* Retrieve and store in array the results of the query.*/
    while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $row_array['id'] = $row['id'];
        $row_array['value'] = $row['state'];
        $row_array['abbrev'] = $row['abbrev'];
        array_push($return_arr,$row_array);
    } //while
} //if
/* Free connection resources. */
$conn = null; 
/* Toss back results as json encoded array. */
echo json_encode($return_arr);

?>

这是第一个php源页面（states.php）的代码：

<?php require_once "connectToDatabase.php"; ?>

<script>
function notSet(){
        var answer = confirm('NOT SET');
} 
function set(){
        var answer = confirm('IS SET');
}
</script>

<?php

if ( !isset($_GET['term']) ){
    echo '<script type="text/javascript">'
    , 'notSet();'
    , '</script>';
    exit;
} //if

echo '<script type="text/javascript">'
   , 'notSet();'
   , '</script>';

try {
    $conn = connectionFunction();
} //try
catch(PDOException $e) {
    echo $e->getMessage();
} //catch

$return_arr = array();

if ($conn){
    //$ac_term = "%".$_GET['term']."%";
    $ac_term = $_GET['term']."%";
    $query = "SELECT * FROM states where state like :term";
    $result = $conn->prepare($query);
    $result->bindValue(":term",$ac_term);
    $result->execute();

    /* Retrieve and store in array the results of the query.*/
    while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $row_array['label'] = $row['state'];
        $row_array['value'] = $row['abbrev'];
        array_push($return_arr,$row_array);
    } //while
} //if
/* Free connection resources. */
$conn = null; 
/* Toss back results as json encoded array. */
echo json_encode($return_arr);

?>

这是MySQL：

CREATE TABLE `states` (
  `id` int(11) NOT NULL auto_increment,
  `state` varchar(20) NOT NULL,
  `abbrev` varchar(2) NOT NULL,
  PRIMARY KEY  (`id`)
);

INSERT INTO `states` VALUES(1, 'Alabama', 'AL');
INSERT INTO `states` VALUES(2, 'Alaska', 'AK');
INSERT INTO `states` VALUES(3, 'Arizona', 'AZ');
INSERT INTO `states` VALUES(4, 'Arkansas', 'AR');
INSERT INTO `states` VALUES(5, 'California', 'CA');
INSERT INTO `states` VALUES(6, 'Colorado', 'CO');
INSERT INTO `states` VALUES(7, 'Connecticut', 'CT');
INSERT INTO `states` VALUES(8, 'Delaware', 'DE');
INSERT INTO `states` VALUES(9, 'Florida', 'FL');
INSERT INTO `states` VALUES(10, 'Georgia', 'GA');
INSERT INTO `states` VALUES(11, 'Hawaii', 'HI');
INSERT INTO `states` VALUES(12, 'Idaho', 'ID');
INSERT INTO `states` VALUES(13, 'Illinois', 'IL');
INSERT INTO `states` VALUES(14, 'Indiana', 'IN');
INSERT INTO `states` VALUES(15, 'Iowa', 'IA');
INSERT INTO `states` VALUES(16, 'Kansas', 'KS');
INSERT INTO `states` VALUES(17, 'Kentucky', 'KY');
INSERT INTO `states` VALUES(18, 'Louisiana', 'LA');
INSERT INTO `states` VALUES(19, 'Maine', 'ME');
INSERT INTO `states` VALUES(20, 'Maryland', 'MD');
INSERT INTO `states` VALUES(21, 'Massachusetts', 'MA');
INSERT INTO `states` VALUES(22, 'Michigan', 'MI');
INSERT INTO `states` VALUES(23, 'Minnesota', 'MN');
INSERT INTO `states` VALUES(24, 'Mississippi', 'MS');
INSERT INTO `states` VALUES(25, 'Missouri', 'MO');
INSERT INTO `states` VALUES(26, 'Montana', 'MT');
INSERT INTO `states` VALUES(27, 'Nebraska', 'NE');
INSERT INTO `states` VALUES(28, 'Nevada', 'NV');
INSERT INTO `states` VALUES(29, 'New Hampshire', 'NH');
INSERT INTO `states` VALUES(30, 'New Jersey', 'NJ');
INSERT INTO `states` VALUES(31, 'New Mexico', 'NM');
INSERT INTO `states` VALUES(32, 'New York', 'NY');
INSERT INTO `states` VALUES(33, 'North Carolina', 'NC');
INSERT INTO `states` VALUES(34, 'North Dakota', 'ND');
INSERT INTO `states` VALUES(35, 'Ohio', 'OH');
INSERT INTO `states` VALUES(36, 'Oklahoma', 'OK');
INSERT INTO `states` VALUES(37, 'Oregon', 'OR');
INSERT INTO `states` VALUES(38, 'Pennsylvania', 'PA');
INSERT INTO `states` VALUES(39, 'Rhode Island', 'RI');
INSERT INTO `states` VALUES(40, 'South Carolina', 'SC');
INSERT INTO `states` VALUES(41, 'South Dakota', 'SD');
INSERT INTO `states` VALUES(42, 'Tennessee', 'TN');
INSERT INTO `states` VALUES(43, 'Texas', 'TX');
INSERT INTO `states` VALUES(44, 'Utah', 'UT');
INSERT INTO `states` VALUES(45, 'Vermont', 'VT');
INSERT INTO `states` VALUES(46, 'Virginia', 'VA');
INSERT INTO `states` VALUES(47, 'Washington', 'WA');
INSERT INTO `states` VALUES(48, 'West Virginia', 'WV');
INSERT INTO `states` VALUES(49, 'Wisconsin', 'WI');
INSERT INTO `states` VALUES(50, 'Wyoming', 'WY');
INSERT INTO `states` VALUES(51, 'American Samoa', 'AS');
INSERT INTO `states` VALUES(52, 'District of Columbia', 'DC');
INSERT INTO `states` VALUES(53, 'Federated States of ', 'FM');
INSERT INTO `states` VALUES(54, 'Guam', 'GU');
INSERT INTO `states` VALUES(55, 'Marshall Islands', 'MH');
INSERT INTO `states` VALUES(56, 'Northern Mariana Isl', 'MP');
INSERT INTO `states` VALUES(57, 'Palau', 'PW');
INSERT INTO `states` VALUES(58, 'Puerto Rico', 'PR');
INSERT INTO `states` VALUES(59, 'Virgin Islands', 'VI');

请注意，在php源页面中我有JS警报，这样我可以看到当我直接调用他们的URL时页面是否正常工作。

在我的故障排除中，我想我会尝试一个有效的例子，但它没有用。

提前谢谢。

Answer 1

检查浏览器控制台并查看是否已返回错误异常。数组是否正确返回？此外，尝试打开states.php文件，看看是否返回编码为json的数组而没有任何错误。

jquery autocomplete不调用“source”.php

1 个答案: