JQuery two autocomplete text-fields

Question

I don't know why if I have only one text field for categories the autocomplete is working (i can see suggested fill when user is typing in that categories text input box) but when I want to use more than one field let's say for subcategories it's not working on both (suggestions are not displaying)... Please help

<script type="text/javascript">


        $.getJSON(  {{ route('search.categories') }}, function( data ) {

            var categories = data.map(function(val){
                return val.title;
            });

            auto(categories);

        });
        $.getJSON( {{ route('search.subcategories') }}, function( data ) {

            var subcategories = data.map(function(val){
                return val.title;
            });

            auto(subcategories);

        });

        function auto(categories){

            $("#category_input").autocomplete({
                source: categories,
                minLength: 2
            });
        }
        function auto(subcategories){

            $("#subcategory_input").autocomplete({
                source: subcategories,
                minLength: 2
            });
        }




    </script>

View:

<input type="text" id="category_input" />
<input type="text" id="subcategory_input"/>

You cannot have two functions with the same name (auto). More specifically, the second one overwrites the first one. — Jeto
– Jeto, Commented Aug 19, 2018 at 9:19
@Jeto I thought "auto" is not a name but kind of a type like en.cppreference.com/w/cpp/language/auto — Adam
– Adam, Commented Aug 19, 2018 at 9:25

Mark C. · Accepted Answer · 2018-08-19 09:21:11Z

1

Try this:

<script type="text/javascript">


    $.getJSON(  {{ route('search.categories') }}, function( data ) {

        var categories = data.map(function(val){
            return val.title;
        });

        auto(categories);

    });
    $.getJSON( {{ route('search.subcategories') }}, function( data ) {

        var subcategories = data.map(function(val){
            return val.title;
        });

        auto_sub(subcategories);

    });

    function auto(categories){

        $("#category_input").autocomplete({
            source: categories,
            minLength: 2
        });
    }
    function auto_sub(subcategories){

        $("#subcategory_input").autocomplete({
            source: subcategories,
            minLength: 2
        });
    }




</script>

answered Aug 19, 2018 at 9:21

Mark C.

4084 silver badges14 bronze badges

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

1 Comment

Adam Over a year ago

Thank you it's working but i had to delete ";" there ` }) auto(categories)`

Collectives™ on Stack Overflow

JQuery two autocomplete text-fields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related