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

【问题标题】：How to do a javascript function for autocomplete with images?如何使用 javascript 功能自动完成图像？
【发布时间】：2015-03-27 22:22:10
【问题描述】：

我正在尝试执行一个返回具有自动完成功能的搜索列表的功能。我必须使用 .最终的结果一定是这样的：

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>

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

【问题讨论】：

标签： javascript jquery html autocomplete

【解决方案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);
            };
        }
    });
});

【讨论】：