如何使用 javascript 功能自动完成图像？

Question

我正在尝试实现 returns 具有自动完成功能的搜索列表的功能。我必须使用一个 .最后的结果一定是这样的：

http://www.casimages.com.br/i/150325064429419254.png.html

我又做了一次自动完成

html

<label class="formee-lbl">
   Região Fiscal
</label>

Js:

               <script type="text/javascript">


                            var availableTags = [
                                 "DFR - SÃO JOSÉ DOS CAMPOS",
                                 "DFR - ARARAGUARA",
                                 "DFR - FRANCA",
                                 "DFR - JUNDIAI",
                                 "DFR - PIRACICABA",
                                 "DFR - BARUERI",
                                 "DERPF - SÃO PAULO",
                                 "DFR - CURITIBA",
                                 "DFR - LONDRINA",
                                 "DFR - CASCAVEL"

                            ];

                            var availableUnidades = [
                                 "UNIDADE: DFR - SÃO JOSÉ DOS CAMPOS",
                                 "UNIDADE: DFR - ARARAGUARA",
                                 "UNIDADE: DFR - FRANCA",
                                 "UNIDADE: DFR - JUNDIAI",
                                 "UNIDADE: DFR - PIRACICABA",
                                 "UNIDADE: DFR - BARUERI",
                                 "UNIDADE: DERPF - SÃO PAULO",
                                 "UNIDADE: DFR - CURITIBA",
                                 "UNIDADE: DFR - LONDRINA",
                                 "UNIDADE: DFR - CASCAVEL"

                            ];

                            $(document).ready(function () {//Carrega a função junto com a página

                               $("#autocomplete").autocomplete({
                                    source: availableTags
                               });

                               $("#autocompleteUnidades").autocomplete({
                                   source: availableUnidades
                               });


                            });
                   </script>

我需要做什么才能将任何图像添加到自动完成功能？还有什么我可以用的吗？

Answer 1

使用 jQuery 您可以编写自己的渲染器

$(document).ready(function () {
    //...here is the projects source

    $("#autocomplete").autocomplete({
        source: availableTags,
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>')
                    .append('<a><img src="'+ item.image +'">' + item.label + '<br>' + item.value + '</a>')
                    .appendTo(ul);
            };
        }
    });
});

如何使用 javascript 功能自动完成图像？

How to do a javascript function for autocomplete with images?

html

javascript

jquery

autocomplete