当源是数据库时,如何格式化自定义数据并在自动完成中显示

时间:2012-10-09 20:21:05

标签: php jquery sql

所以我试图在自动完成小部件中获取一些信息,就像它在JQuery UI演示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.

&GT;

2 个答案:

答案 0 :(得分:0)

jQuery UI自动完成选项'source'意味着是字符串或字符串数​​组。它无法从PHP页面获取此信息。您必须使用AJAX调用来读取PHP页面的输出。如果您之前没有使用过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调用问题。

答案 1 :(得分: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 );
            };
        }));

我希望这也有助于其他人。