jquery - jQuery UIオートコンプリートが機能しませんか？

Question

ここで私はjQueryを実装しようとしています。2つのメインファイルがあります。1つは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);
?>

次に、jQuery関数を呼び出しているindex.htmlという名前の別のファイルがあります。

<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データ（jsonencodeをエコーするために割り当てていた）の理由である可能性があることを検索して見つけたためです$arrが、それでも機能しません。

score 2 · Accepted Answer

jQuery-uiオートコンプリートは、サーバー側のスクリプトでオートコンプリートデータをプローブできますが、スクリプトは、次の2つのバリエーションのいずれかでそのデータをJSON形式で返す必要があります。

文字列の配列：

[ "Choice1", "Choice2" ]

labelおよび[または]valueプロパティを持つオブジェクトの配列：

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

score 1 · Accepted Answer

私はあなたに提案することができます

Firebug extensioをインストールし、Mozillaブラウザを使用してこの種の問題をデバッグしてください。
Firebugでデバッグして、javascriptまたはjquery構文エラーがないことを確認します。
アプリケーションがdb.phpにリクエストを送信したことを確認してください。これは、firebugコンソールで確認できます。

jQueryの構文が間違っていることに気づきました。参考のためにここを参照してください：http：//jqueryui.com/demos/autocomplete/#remote

そこに注意してください、それらのどれも文字列を直接指定しておらず、常にソース属性が含まれていました。

「ソース」属性を指定し忘れた可能性があります。

幸運を。

score 0 · Accepted Answer

これが私が解決策を思いついたものです。これを使用して他の人が問題を抱えている場合は、私のように走り回ったり頭を混乱させたりすることなく基本を理解できるように、これを使用するための短い簡単なチュートリアルとして使用できます。 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>

もう1つ、オンラインGoogle APIを使用してスクリプトライブラリとCSSファイルを取得していることに注意してください。このコードをテストする前に、インターネットに接続していることを確認してください。

コードを実行してみてくださいそれは魅力のように実行されます：）....初心者にとっても非常に簡単なので、説明しませんでした...データベースからデータを取得してすべてを作成する簡単な用語ですJquery UIオートコンプリートにはデフォルトでJasonデータが必要なため、データはjason形式でエコーされます。

それが役に立てば幸い：）

もう1つ気付いたのは、firebugで、何かを入力するたびに、このオートコンプリートが結果を取得している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

jquery - jQuery UIオートコンプリートが機能しませんか？

3 に答える 3

Related

Reference