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

Question

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

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