将json数据加载到自动完成jquery

时间:2011-10-01 08:21:33

标签: php javascript jquery jquery-ui-autocomplete

我正在尝试使用jqueryui autocomplete从我的表单上的mysql数据库加载服务但没有任何反应?请帮帮我或告诉我哪里错了 我的HTML

<input type="text" id="actual_service" />

我的javascript脚本

$("#actual_service").autocomplete({
source: "http://dev_svr/medportal/search.php?callback=?",
dataType: "jsonp",
 minLength: 1
});

这是search.php

$con = mysql_connect('localhost', 'dev', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("medrep", $con);

$term = trim(strip_tags($_GET['term']));

$qstring = "select  prod_id id,prod_name value FROM product where prod_type='SERVICE' and prod_name LIKE '%".$term."%' ORDER BY prod_name;";
$result = mysql_query($qstring);
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
        $row['value']=htmlentities(stripslashes($row['value']));
        $row['id']=(int)$row['id'];
        $row_set[] = $row;
}
header("Content-type: application/json");
echo json_encode($row_set);

当我加载该页面时,当我输入任何内容时,该输入框上没有任何内容。

当我将sql限制为3行时,这是http://dev_svr/medportal/search.php?term=ct的示例输出

[{"id":50,"value":"ABDOMEN SUPINE&amp;ERECT(2VIEWS)"},{"id":142,"value":"CT BRAIN"},{"id":115,"value":"CT CERVICAL SPINE"}]

1 个答案:

答案 0 :(得分:0)

1。您的jQuery代码不正确

您没有从远程域获取数据,因此您不需要JSONP请求。 它应该是:

$("#actual_service").autocomplete({
    source: "http://dev_svr/medportal/search.php",
    minLength: 1
});

2。您的JSON对象不正确。

自动填充的每个json对象都应该有两个值:labelvalue(无ID)。如果您希望产品ID是所选项的值,并且产品名称是显示给用户的文本,那么json对象应该是:

[{"value":50,"label":"ABDOMEN SUPINE&amp;ERECT(2VIEWS)"},{"value":142,"label":"CT BRAIN"},{"value":115,"label":"CT CERVICAL SPINE"}]

修改

根据你在评论中提到的,试试这个jQuery代码:

$('#actual_service').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: 'http://dev_svr/medportal/search.php',
            dataType: 'jsonp',
            data: { term: request.term },
            success: function( data ) {
                    response( data );
            }
        });
    },
    minLength: 1
});