jQuery 自动完成从 Mysql 数据库中拉取

Question

我要解决的问题： 用户，输入一个邮政编码，如08212，或任何美国邮政编码，jquery UI Autocomplete 调用此源文件：../src/php/registration/getFanLoc.php，该文件根据输入的邮政编码对数据库中的某些字段（如下所述）进行查询.

在 index.php 上有一个表单/jquery：

假设所有的 jquery UI 代码都已经在这个文件中了

<script type="text/javascript">
    $(document).ready(function()
    {
        $('input#zip').autocomplete({
            dataType: "json",
            source: "../src/php/registration/getFanLoc.php",
            minLength: 3
        });
    });
</script>

<form method="post" id="FanDetail">
  <div class="ui-widget">
     <label for="zip">Zip: </label>
     <input id="zip" name="zipcode" value="US Zipcode" onFocus="clearText(this)" /><br />
  </div>
</form>

getFanLoc.php 文件 - 查询 mysql 以获取与输入的 5 位邮政编码相对应的任何记录：

     <?php
    try{
        ///////////////////////////////////////////////////////////
        $zip = mysql_real_escape_string($_GET['zipcode']); //////
        ///////////////////////////////////////////////////////////
        require_once('../../cfg/dbi.php') or die('Cant require dbi');
        $dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );  
        $sth = $dbh->prepare(
        'SELECT fanDetLocID, fanDetLocCity, fanDetLocState FROM fanDetailLocation WHERE fanDetLocZip = ?');
        $sth->bindParam(1, $zip);
        $sth->execute();
    while ($res = $sth->fetch(PDO::FETCH_ASSOC)) {
        foreach($res as $column=>$val) {
            $res[$i][$column] = $val;
        }
        $i++;
        }   
    print json_encode($res);
} 


    catch(PDOException $e){
        file_put_contents('../../../PDODBConnectionErrors.txt', 'ERROR: [getFanLoc.php] about '.$e->getMessage().'<br>', FILE_APPEND);  
    }



    ?>

我最初遇到问题，因为它没有连接到数据库并且PDODBConnectionErrors.txt 出现错误，但是我从FIXED 那部分开始，现在它什么也没做，但现在没有抛出错误在文件中。有人看到我做错了什么吗？我是使用autocomplete jQuery UI widget 的新手，所以请放轻松:)。

我尝试过的更改：

• 尝试在上面的 $_GET['zipcode'] 中添加，因为下面的评论者认为这个插件使用了 $_GET 而不是 $_POST 。将其从 $_POST 更改为 $_GET 是正确的，但现在我在尝试直接访问文件时遇到以下问题：

• 还尝试像getFanLoc.php?zipcode=08039 一样直接访问文件，这似乎至少让我更接近了一点。 *当我从这个 url 访问它时，页面现在声明 *False，这让我认为我的 while() foreach() 循环是错误的。有人用它看起来很强壮吗？

补充：我正在使用这个插件：http://jqueryui.com/demos/autocomplete/。谢谢@Sennet

**FIXED While() 循环（感谢 Sennett）适用于直接访问，但不适用于表单：

    $jsonArray = array();
    while ($result = $sth->fetch(PDO::FETCH_ASSOC)) {
     $jsonArray[] = array(
          'label' => $result['fanDetLocID'], 
          'value' => $result['fanDetLocCity']);
    }
    print $jsonArray; // print results of array
    print json_encode($jsonArray); // json encode that array
}   // can't have code between here

// and here
    catch(PDOException $e){
        file_put_contents('../../../PDODBConnectionErrors.txt', 'ERROR: [getFanLoc.php] about '.$e->getMessage().'<br>', FILE_APPEND);  
    }

与 Sennet 合作 4 小时后，我们现在拥有：

<script type="text/javascript">
$(document).ready(function()

{ $('input#zip').autocomplete({

    dataType: "json",
    source: "../src/php/registration/getFanLoc.php",
    minLength: 3,
    select: function(event, args){
        event.preventDefault();
        var joinedValues = args.item.value;
        var id = joinedValues.split("|")[0];
        var cityAndState= joinedValues.split("|")[1];
        document.getElementById('actualZip').value = cityAndState ; 
            document.getElementById('zip').value = id;
    }
});

});

Answer 1

首先要做的是尝试直接通过网络浏览器访问文件。将其保留为$_GET。当您浏览到getFanLoc.php?zipcode=XXX 时会发生什么，其中 XXX 是已知存在的代码？有结果吗？

另外，假设您使用的是this plugin，您应该返回 JSON 而不是大量超链接 - 插件会为您将它们包装在 HTML 中。