自动填充:如何使用像facebook这样的自动完成功能?

时间:2016-10-12 04:04:16

标签: jquery autocomplete

我已经尝试过textcomplete,但我真的遇到了一个问题,我只能在select上设置单个值。

在自动填充中,我知道如何设置多值。但是我不知道如何转换它,如下图所示...

enter image description here

您还可以回顾一下我在textcomplete中尝试过的内容 - Text Complete Query

1 个答案:

答案 0 :(得分:0)

首先,您需要包含自动完成js和css。

这是链接 https://blog.jqueryui.com/2015/03/jquery-ui-1-11-4/

包括jquery-ui js和jquery-ui css

$("#txtSeller").on('keyup', function(e){
var currentObj = $(this);
jQuery("#txtSeller").autocomplete({
    source: function(request, response) {
        var postData = {
            "operation":"search",
            "sellerName": currentObj.val()//sending the name to backend
        }

        $.ajax({
            type: "POST",
            cache: false,
            url: "controllers/admin/put_orders.php",
            datatype:"json",
            data: postData,

            success: function(dataSet) {
                response($.map(JSON.parse(dataSet), function (item) {
                    return {
                        id: item.id,
                        value: item.name
                    }
                }));
            },
            error: function(){

            }
        });
    },
    select: function (e, i) {
        var sellerId = i.item.id;
        currentObj.attr("seller-id", sellerId);
        $("#txtSeller").val(i.item.value);
    },
    minLength: 3
});

});

HERE是自动填充的完整代码。

请让你为这个ajax调用写sql查询不要忘记在Sql Query中写LIKE参数