jquery - jqueryオートコンプリートは「source」.phpを呼び出していません

Question

データソースとしてphpページを使用してjqueryオートコンプリートを使用しています。Safari 5.1.9、Camino 2.1.2、Stainless 0.8 (すべて Mac) で試しました。オートコンプリートは機能しません!!!

助けてください！

私はこれを調査し、多くの同様の問題を見ましたが、解決策はありません。HTML5なのか何なのかわかりません...

ここの例に従いました: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

jquery 1.9+ は Web サイトの主要コンポーネントを破壊するため、jquery 1.8.3 と jquery-ui 1.9.2 を使用しています。

インデックス（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 を直接呼び出したときにページが機能しているかどうかを確認できるようにするためです。

私のトラブルシューティングでは、実際の例を試してみようと思いましたが、うまくいきませんでした。

前もって感謝します。

score 0 · Accepted Answer

ブラウザコンソールをチェックして、エラー例外が返されたかどうかを確認します。配列は正しく返されていますか? また、states.php ファイルを開いて、json にエンコードされた配列がエラーなしで返されるかどうかを確認してください。

jquery - jqueryオートコンプリートは「source」.phpを呼び出していません

1 に答える 1

Related

Reference