2

在这里，我正在尝试实现 jQuery 我有两个主要文件，一个是 db.php，其中包含这个东西：

<?php

$connection = mysql_connect("localhost","root","");
$db = mysql_select_db("auto",$connection);

$sql = "SELECT * FROM data";

$result = mysql_query($sql,$connection);
//$arr = array();
while($row = mysql_fetch_array($result)){

echo $row['name']."\n";
}
//echo json_encode($arr);

mysql_close($connection);
?>

然后我有另一个名为 index.html 的文件，我在其中调用 jQuery 函数：

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css">
<link rel="stylesheet" type="text/css" href="css/autocomplete.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script>

$(document).ready(function(){
    $("#example").autocomplete("db.php");
  });

</script>
</head>

<body>

Auto:<input id="example" type="text">

</body>
</html>

但我无法运行任何代码你能告诉我为什么吗？我是 jQuery 的新手，所以为错误道歉。

PS：我尝试使用 json 编码功能，因为我搜索并发现它可能是 Json 数据的原因（我分配给$arr然后回显 jsonencode）但它仍然无法正常工作。

4

3 回答 3

2

jQuery-ui 自动完成可以探测服务器端脚本以获取自动完成数据，但脚本必须以以下两种变体中的任何一种以 JSON 格式返回该数据：

字符串数组：

[ "Choice1", "Choice2" ]

具有标签和 [或] 值属性的对象数组：

[ { label: "Choice1", value: "value1" }, ... ]

所以你需要稍微修改一下你的 PHP 代码——这json_encode是正确的做法：

$arr = array();
while($row = mysql_fetch_array($result)){
    $arr[] = $row["name"];
}
echo json_encode($arr);

你的 JavaScript 也需要一些修复：

    $( "#example" ).autocomplete({
        source: "db.php"
    });
于 2012-06-27T19:25:04.767 回答
1

我可以建议你

  1. 安装 Firebug 扩展，请使用 Mozilla 浏览器帮助您调试此类问题。
  2. 通过在 Firebug 中调试它来确保没有 javascript 或 jquery 语法错误。
  3. 确保您的应用程序向 db.php 发出了请求，您可以在 firebug 控制台中看到它。

我注意到您的 jQuery 语法是错误的。请参阅此处以供参考：http: //jqueryui.com/demos/autocomplete/#remote

请注意，他们都没有直接指定字符串，总是包含源属性。

可能是您忘记指定“源”属性。

祝你好运。

于 2012-06-27T18:41:47.503 回答
0

好的，这就是我想出的解决方案，我将其发布在答案中，这样如果其他人在使用它时遇到问题，可以理解基本知识，而不会像我一样到处乱跑和乱搞，您可以将其作为使用的简短简单教程Jquery UI 自动完成：

首先在您的 mysql 服务器中创建一个数据库名称auto并将此转储查询放入 SQL 中或创建一个名为auto.sql的文件并将所有以下内容放入该文件中，然后通过进入您刚刚创建的数据库（即“auto”）从phpmyadmin导入它：

-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jun 27, 2012 at 06:35 PM
-- Server version: 5.5.24-log
-- PHP Version: 5.3.13

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `auto`
--

-- --------------------------------------------------------

--
-- Table structure for table `data`
--

CREATE TABLE IF NOT EXISTS `data` (
  `name` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `data`
--

INSERT INTO `data` (`name`) VALUES
('fahim'),
('asim'),
('yasir'),
('jalil'),
('birdy'),
('gudu'),
('zalim'),
('papu'),
('ozair'),
('saima');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

现在在您的XAMPP 或 WAMP 或您用作自动的任何 Web 服务器中创建一个文件夹，并制作以下​​文件并将其内容按相应顺序放置：

第一个文件是db.php：

 <?php

    $connection = mysql_connect("localhost","root",""); 
//make sure you change the hostname, username and password according to your setting
    $db = mysql_select_db("auto",$connection);

    $sql = "SELECT * FROM data";

    $result = mysql_query($sql,$connection);
    $arr = array();
    while($row = mysql_fetch_array($result)){

    $arr[] = $row['name']."\n";
    }
    echo json_encode($arr);

    mysql_close($connection);


    ?>

制作另一个名为index.php的文件并放入以下内容：

<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" type="text/css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script>

$(document).ready(function() {
        $( "#AC" ).autocomplete({
            source: "db.php"
        });
    });

</script>
</head>

<body>

 <form>
     Text Box: <input id="AC" type="text" />
    </form>
</body>
</html>

另一件事请注意，我正在使用在线 Google API 来检索脚本库和 CSS 文件，因此在测试此代码之前请确保您已连接到互联网。

尝试运行代码，它将像魅力一样运行:)....对于新手来说非常简单，这就是为什么我没有解释它...只是一个简单的术语，我从数据库中获取数据并完成所有这些以 jason 格式回显数据，因为 Jquery UI 自动完成默认需要 Jason 数据！

希望能帮助到你 ：）

另一件事我注意到，在萤火虫中，每当我输入某些内容时，此自动完成功能都会向 Db 页面发送一个 Ajax 请求，我从中获取结果，并在该请求中发送一个变量名术语，因此如果我在db.php中获取该变量文件我也可以在我的 SQL 中使用它来检索特定字符串，因为在上述方法中，它将显示从数据库中检索到的所有记录，所以如果我只想获取特定术语，例如我在文本框中输入一个单词“fa” index.html文件我希望它只从数据库中检索那些包含字符串“ fa”的名称，因为我可以使用该变量并将其放入 SQL 语句中，我可以使用 SQL$_GET['term']LIKE运算符来查找某个模式，我将更新db.php文件，如下所示：

<?php

    $connection = mysql_connect("localhost","root",""); 
//make sure you change the hostname, username and password according to your setting
    $db = mysql_select_db("auto",$connection);

    $sql = "SELECT * FROM data WHERE name LIKE '%".$_GET['term']."%'";

    $result = mysql_query($sql,$connection);

    //print_r ($result);

    $arr = array();
    while($row = mysql_fetch_array($result)){

    $arr[] = $row['name']."\n";
    }
    echo json_encode($arr);

    mysql_close($connection);


    ?>

现在我在做什么，我对SQL说让我得到具有$_GET['term']正在检索的字符串模式的名称:)....！！T*他很简单对* ??

如果您想了解有关 LIKE 运算符的更多信息，请查看此链接http://www.w3schools.com/sql/sql_like.asp

于 2012-06-28T05:45:00.443 回答