Jquery UI自动完成 - 如何使用该项添加其他值?

时间:2013-08-19 18:20:25

标签: jquery jquery-ui autocomplete

我正在使用自动完成功能,并从数据库中获取项目。 这是我的JS:

    $(".add").autocomplete({

        source: function(req, add){

            $.getJSON("add.php?callback=?", req, function(data) {

                var suggestions = [];

                $.each(data, function(i, val){
                    suggestions.push(val.name);
                });

                add(suggestions);
        });
    },

        messages: {
            noResults: '',
            results: function() {}
        }

    });

我发送一个带有PHP的数组,其中有'name'和'id'。我希望能够在用户选择它时知道所选项目的ID而无需访问数据库,但是如果没有显示它我就无法将其放入源中,这是我不想要的。 我希望在每个项目自动完成查找时都有一个不可见的ID,当用户选择它并提交值时,我可以在数据库中插入该对象。

这是我的PHP文件:

<?php

require('connect.php');

$param = $_GET["term"];

$query = mysqli_query($connection, "SELECT * FROM stuff WHERE name REGEXP '^$param'");

for ($x = 0, $numrows = $query->num_rows; $x < $numrows; $x++) {
    $row = mysqli_fetch_assoc($query);
    $add[$x] = array("name" => $row["name"], "id" => $row["id"]);
}

$response = $_GET["callback"] . "(" . json_encode($add) . ")";
echo $response;

希望这是有道理的。

1 个答案:

答案 0 :(得分:1)

您可以从此链接中获取示例:http://jqueryui.com/autocomplete/#custom-data

$("#txtItem").autocomplete({    
    select: function (event, ui) {
               return false;
            }
}).data("ui-autocomplete")._renderItem = function( ul, item ) {
        return $("<li>")
        .append( "<a onclick='itemclicked(this)' id='" + item.id + "'>" + item.desc + "</a>" ).appendTo( ul );
        };

function itemclicked(sender)
{
    alert($(source).attr("id");)
}