0

JQuery UI demo Demoに示されているように、オートコンプリート ウィジェットで情報を取得しようとしています。唯一の問題は、表示したいデータを入力する変数を使用していることです。代わりに、 MySQL のデータベースを使用して、データとさまざまな説明などを作成します。このため、情報を検索する別の php ページを使用するようにソースを変更しました。これがオートコンプリートのコードです。メソッドがよくわからないので、基本検索から変更していません。

これはJSです：

$(document).ready((function(){
            $( "#completa" ).autocomplete({
        source: "buscar.php",
        minLength: 1,
                    focus: function (event, ui){
                        $("#completa").val(ui.item.val);
                        return false;
                    };
        }));

これは私がbuscar.phpに持っているものです:

<?php

    $conec = mysql_connect(localhost, root, admin);
    if(!$conec)
    {
        die(mysql_error());
    }
    else
    {
        $bd = mysql_select_db("ve_test",$conec );
        if(!$bd)
        {
            die(mysql_error());
        }
    }

$termino = trim(strip_tags($_GET['term']));//Obtener el termino que envia el autocompletar

$qstring = "SELECT name, descripcion FROM VE_table WHERE name LIKE '%".$termino."%'";
$result = mysql_query($qstring);//Solicitud a la Base de Datos

while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//Realizar un LOOP sobre los valores obtenidos
{
                $row['value']=htmlentities(stripslashes($row['name']));
                $row_set[] = $row;//build an array
}
echo json_encode($row_set);//Enviar los datos al autocompletar en codificacion JSON, Altamente Necesario.

?>

4

2 に答える 2

0

jQuery UI オートコンプリート オプション 'source' は、文字列または文字列の配列であることを意図しています。PHP ページからこれを取得することはできません。PHP ページから出力を読み取るには、AJAX 呼び出しを使用する必要があります。AJAX を使用したことがない場合は、チュートリアルに Google を使用する必要があります。私がすることは、区切り文字で区切られたすべてのデータを PHP スクリプトに出力させることです (---、たとえば、データのリストにないもの)。次に、AJAX 呼び出しを使用してデータを取得し、split() を使用して出力を区切り文字 (---) で文字列の配列に分割します。次に、この配列はオートコンプリートのソースとして機能するはずです。Javascript に問題がないことを確認するには、次を使用します。

$(document).ready(function(){
    $( "#completa" ).autocomplete({
        source: ["string","sample","test","preset values","thisiswhereyourarraywillgo"],
        minLength: 1,
        focus: function (event, ui){
            $("#completa").val(ui.item.val);
            return false;
        }
    });
});

それが配列内のこれらの 5 つの単語のいずれかを予測するために機能する場合は、AJAX 呼び出しに問題があります。

于 2012-10-09T20:33:22.173 に答える
0

わかりましたので、質問の答えを見つけました。ここにあります：

buscar.php では、JQ で受け取りたい名前の変数を追加するだけで済みました。

<?php

    $conec = mysql_connect(localhost, root, admin);
    if(!$conec)
    {
        die(mysql_error());
    }
    else
    {
        $bd = mysql_select_db("ve_test",$conec );
        if(!$bd)
        {
            die(mysql_error());
        }
    }

$termino = trim(strip_tags($_GET['term']));//Obtener el termino que envia el autocompletar

$qstring = "SELECT name, descripcion FROM VE_table WHERE name LIKE '%".$termino."%'";
$result = mysql_query($qstring);//Solicitud a la Base de Datos

while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//Realizar un LOOP sobre los valores obtenidos
{
                $row['value']=htmlentities(stripslashes($row['name']));
                $row['desc']=  htmlentities(stripcslashes($row['descripcion'])); //This is the line I Changed
                $row_set[] = $row;//build an array
}
echo json_encode($row_set);//Enviar los datos al autocompletar en codificacion JSON, Altamente Necesario.?>

そして、これは私が使用したJQです：

    $(document).ready((function(){
            $( "#completa" ).autocomplete({
        source: "buscar.php",
        minLength: 1,
                    focus: function( event, ui ) {
                    $( "#completa" ).val( ui.item.label );
                    return false;
                    },
                    select: function( event, ui ) {
                    $( "#completa" ).val( ui.item.value );
                    $( "#completa-description" ).html( ui.item.desc );
                    return false;
                }
            })
            .data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.value + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
            };
        }));

これが他の誰かにも役立つことを願っています。

于 2012-10-09T21:35:49.503 に答える