如何使用图像自动完成javascript函数？

Question

我正在尝试做一个函数，返回一个自动完成的搜索列表。我得用一个。最终的结果肯定是这样的：

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

我又完成了一次自动完成

html

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

联署材料：

               <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);
            };
        }
    });
});