jQuery自动完成从数据库中检索数据

时间:2016-02-12 10:16:44

标签: javascript php jquery mysql autocomplete

我已经为我的网站实现了jQuery自动完成功能,它运行正常。但我希望自动完成的结果只能检索特定人员的数据,而不是完整的数据库结果。

以下是自动填充的jQuery

jQuery(document).ready(function($){
$('.product_desc').autocomplete({source:'functions/products.php?', minLength:2});

products.php

//Path for the databsae
<?php
include '../include/configuration.php';

if ( !isset($_REQUEST['term']) )
    exit;

$rs = mysql_query('select id,item_name,fk_vendor_id from item where item_name like "%'. mysql_real_escape_string($_REQUEST['term']).'%" order by item_name asc ', $con);

$data = array();

if ( $rs && mysql_num_rows($rs) )
{
    while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
    {
        $data[] = array(
            'label' => $row['item_name'],
            'value' => $row['item_name']
        );
    }
}
else 
{
    $data[] = array(
        'label' => 'not found',
        'value' =>''
    );
}

// jQuery wants JSON data
echo json_encode($data);
flush();
?>

任何解决方案都将受到赞赏。

2 个答案:

答案 0 :(得分:0)

试试这个:

$(".product_desc").autocomplete({
source: "functions/products.php",
minLength: 2,
select: function(event,ui){
    //do something
    }
});

答案 1 :(得分:0)

尝试此代码,任何具有类.search自动完成建议的文本字段将在ajax.php文件中的服务器端工作,您需要返回如下数组:

$response = ['Computer', 'Mouse', 'Keyboard', 'Monitor'];
echo json_encode($response);

以下是自动建议的示例代码。

$(document).on('keyups','.search',function() {
        $(this).autocomplete({
            source: function( request, response ) {
                if (request.term != "") {
                    $.ajax({
                        url: "ajax.php",
                        dataType: "json",
                        method: "post",
                        data: {
                            name: request.term
                        },
                        success: function (data) {
                            if (data != "") {
                                response($.map(data, function (item) {
                                    var name = item.name;
                                    return {
                                        label: name,
                                        value: name,
                                        data: item
                                    }
                                }));
                            }
                        }
                    });
                }
            },
            autoFocus: true,
            minLength: 2,
            select: function( event, ui ) {
                var name = ui.item.data;
                $(this).val(name);
            }
        });
    });