How to add autocomplete part to html input field

Question

I have a input field with ajax which returns list of elements matching with the input.

<input name="sku_id" type="text" placeholder="SKU" class="form-control" autofocus>

$('[name="sku_id"]').on('keyup', function(event){
    event.preventDefault();
    var sku_id = $('[name="sku_id"]').val();

    if ( sku_id.length > 2){
        $.ajax({
            url : "/sku_auto/",
            type : "POST",
            data : {action:'search_sku',
                    sku_id:sku_id},

            success : function(response){
                var sku_list = response.sku_list;
                console.log(sku_list);
            },

            error : function(xhr,errmsg,err) {
                console.log(xhr.status + ": " + xhr.responseText);
            }
        });
    }
});

The ajax returns a list of elements. I want to ask how to display the list below the input?

Most examples recommended using JQuery-ui's autocomplete feature, but on using the cdn it is messing with the rest of code.

I want to know if i have to write the css for this or i can append it directly?

You can use jQuery with .noConflict(). The answer to this question is actually rather complex. — Robin Dorbell
– Robin Dorbell, Commented Jan 15, 2016 at 9:22
Ok,,,but how will it catch the list my ajax query is returning....Can you explain a little more? — Manish Gupta
– Manish Gupta, Commented Jan 15, 2016 at 9:23
@RobinDorbell What is the input in the function in your answer? — Manish Gupta
– Manish Gupta, Commented Jan 15, 2016 at 10:05

Robin Dorbell · Accepted Answer · 2016-01-15 09:33:59Z

1

You need to create a list of the items recieved and append it to some kind of container. Here's an example:

function createAutoCompleteList(sku_list, input) {
    var container = $('<div class="autocomplete-container">');
    var ul = $('<ul>').appendTo(container);

    $.each(sku_list, function (index, item) {
        var listItem = $("<li>").append(item);
        //You can add click event to the item here.
        ul.append(listItem); 
    });

    input.after(container);
}

When you have this container you'll need some CSS. Another example:

.autocomplete-container {
    position: absolute;
    width: 100%;
    background-color: white;
}

Something along these lines should work.

answered Jan 15, 2016 at 9:33

Robin Dorbell

1,6391 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manish Gupta Over a year ago

what is the input here?

Harsh Sanghani · Accepted Answer · 2016-01-15 09:42:14Z

Yes you can do it with your custom jquery and css code, Just do some modification in your jquery code as following :-

$('[name="sku_id"]').on('keyup', function(event){
    event.preventDefault();
    var sku_id = $('[name="sku_id"]').val();

    var listItem = "<ul>";

    if ( sku_id.length > 2){
        $.ajax({
            url : "/sku_auto/",
            type : "POST",
            data : {action:'search_sku',
                    sku_id:sku_id},

            success : function(response){
                var sku_list = response.sku_list;

                $.each(sku_list, function (index, item) {
                    listItem += "<li>"+item+"</li>";
                });
                listItem += "</ul>";

                $(this).after(listItem);
            },

            error : function(xhr,errmsg,err) {
                console.log(xhr.status + ": " + xhr.responseText);
            }
        });
    }
});

It may help you.

Collectives™ on Stack Overflow

How to add autocomplete part to html input field

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related