Autocomplete: How can I use autocomplete like facebook?

Question

I have already tried textcomplete, But I really face a problem that I can only set single value on select.

In autocomplete I know how to set multi values. But don't know how could i convert it as shown in picture below ...

You can also look back what i have tried in textcomplete here - Text Complete Query

Answer 1

Firstly you need to include auto complete js and css.

HERE is the link https://blog.jqueryui.com/2015/03/jquery-ui-1-11-4/

Include jquery-ui js and 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 is the complete code for autocomplete.

Please make you write the sql query for this ajax call don't forgot to write LIKE parameter in Sql Query