Question

这里我试图实现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的新手，所以对错误道歉。

P.S：我尝试使用json编码函数，因为我搜索并发现它可能是Json数据的原因（我分配给$arr然后回显jsonencode）但仍然无效。

Answer 1

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"
    });

Answer 2

我建议你

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

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

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

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

Answer 3

Ok以下是我提出的解决方案我在答案中发布这个问题，以便如果任何其他人有问题使用这个可以理解基本没有乱跑和像我这样搞乱你可以把它作为简单的简单教程使用Jquery UI自动完成：

首先在mysql Server中创建数据库名称 auto 并将此转储查询放入SQL或创建名为 auto.sql 的文件，并将所有以下内容放在该文件中并从 phpmyadmin 导入您刚刚创建的数据库“auto”：

-- 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或任何网络服务器中创建一个文件夹作为自动使用并制作以下文件并按其各自的顺序放置其内容：

第一个文件是 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 Auto complete默认需要Jason数据!!

希望有所帮助：）

另一件事我注意到，在firebug中，每当我输入内容时，此Autocomplete将向我发送结果的Db页面发送一个Ajax请求，并在该请求中发送一个变量名称术语，如果我在该中获取该变量 db.php 文件我也可以在我的SQL中使用它来检索特定的 String ，因为在上面的方法中它会显示从数据库中检索到的所有记录，所以如果我只想获取例如，我在 index.html 文件的文本框中输入了一个单词 “fa” ，我希望它只检索那些<来自数据库的em> name ，其中包含字符串 “fa” ，因为我可以使用该$_GET['term']变量并将其放入SQL语句中我可以使用SQL 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

我的jQuery UI Autocomplete无法正常工作？

3 个答案: