jquery ui autocomplete with multiple fields

Question

this code works just fine, but the second input field does not show images appearing with the text suggestions. I would appreciate if someone could take a look and let me know what needs to be changed in the js for it to work.

Example queries: clinton, bush

you can see the script here http://predcast.com/include/autoc/jqui/test2.php

<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Autocomplete: Custom HTML in Dropdown</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">        </script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
.loading {
  display: none;
  width: 16px;
  height: 16px;
  background-image: url(/img/loading.gif);
  vertical-align: text-bottom;
}
#autocomplete.ui-autocomplete-loading ~ .loading {
  display: inline-block;
}
.ui-menu-item {
  padding:1px;
  margin:1px;
}
.ac-m {
  height:block;
  overflow:auto;
  padding:2px 2px 2px 2px;
}   
.ac-img {
  max-width:30px;
  float:left;
  margin:2px 2px 2px 2px;
}   
.ac-title {
  margin:1px;
  font-size:14px;
}       
.ui-autocomplete {
  margin:1px;
}
</style>
</head>
<body>
<form action="http://www.test.com/">
<input class="autocomplete" type="text" placeholder="Option 1" name="e1">
<input class="autocomplete" type="text" placeholder="Option 2" name="e2">
<span class="loading"></span>
</form>
<script>
    /*
 * jQuery UI Autocomplete: Custom HTML in Dropdown
 * http://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html
 */
$(function () {
    $('.autocomplete').autocomplete({
        delay: 500,
        minLength: 3,
        source: function (request, response) {
            $.getJSON("http://predcast.com/include/autoc/jqui/jsond.php", {
                q: request.term,
            }, function (data) {
                var array = data.error ? [] : $.map(data.movies, function (m) {
                    return {
                        label: m.title,
                        year: m.year,
                        img: m.img,
                    };
                });
                response(array);
            });
        },
        focus: function (event, ui) {
            event.preventDefault();
        },
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        var $a = $("<div class='ac-m'></div>");

        if (item.img) {
            $("<span></span>").addClass(item.icon).appendTo($a).append("<img src='" + item.img + "' border='0' class='ac-img' />");
        }

        $("<span class='ac-title'></span>").text(item.label).appendTo($a);

        return $("<li></li>").append($a).appendTo(ul);
    };
});
</script>
</body>
</html>

Is there a reason you're using an older verison of JQuery and UI? — Twisty
– Twisty, Commented Apr 24, 2015 at 22:27
hi twisty, no reason. just that part did not change from the demo I found online. Once I have everything working will probably change to the most recent versions and see if anything breaks. — virap
– virap, Commented Apr 25, 2015 at 1:05

rd3n · Accepted Answer · 2015-04-25 01:28:49Z

2

The problem is related to the way you are defining the _renderItem extension point.

In your code, you are redefining the jquery-ui autocomplete _renderItem function only for your first widget instance, so the _renderItem for your second autocomplete instance is the default one defined in the jquery-ui code.

You are initializating the autocomplete for your 2 inputs with this $('.autocomplete').autocomplete({ ...}) then you get the first widget instance with this instruction .data("ui-autocomplete") and then redefine the _renderItem function for this instance only.

You can define it for all your instances like this:

// Create your widget instances
$('.autocomplete').autocomplete({
    delay: 500,
    minLength: 3,
    source: function (request, response) {
        $.getJSON("http://predcast.com/include/autoc/jqui/jsond.php", {
            q: request.term,
        }, function (data) {
            var array = data.error ? [] : $.map(data.movies, function (m) {
                return {
                    label: m.title,
                    year: m.year,
                    img: m.img,
                };
            });
            response(array);
        });
    },
    focus: function (event, ui) {
        event.preventDefault();
    }
});

// Then redefine the _renderItem for each instance
$('.autocomplete').each(function() {
    $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
        var $a = $("<div class='ac-m'></div>");

        if (item.img) {
            $("<span></span>").addClass(item.icon).appendTo($a).append("<img src='" + item.img + "' border='0' class='ac-img' />");
        }

        $("<span class='ac-title'></span>").text(item.label).appendTo($a);

        return $("<li></li>").append($a).appendTo(ul);
    };
});

edited Apr 25, 2015 at 1:28

answered Apr 24, 2015 at 23:00

rd3n

4,7001 gold badge37 silver badges46 bronze badges

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

2 Comments

virap Over a year ago

Thank you яden, could you please tell me what exactly form the old code goes under //your widget options. I tried to edit it mysql by putting there the options like delay: 500, minLength: 3, the json source etc. by it does not seem to work. Thank you.

rd3n Over a year ago

Yes that's what I meant by //your widget options but there was a typo in the code when I paste it in SO. I updated the code, give it a try

Collectives™ on Stack Overflow

jquery ui autocomplete with multiple fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related