带有多个字段的jquery ui自动完成

Question

此代码运行良好，但第二个输入字段未显示与文本建议一起出现的图像。如果有人可以看一下并让我知道需要在 js 中进行哪些更改才能使其正常工作，我将不胜感激。

查询示例：克林顿、布什

你可以在这里看到脚本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>

Answer 1

问题与您定义_renderItem 扩展点的方式有关。

在您的代码中，您只为您的第一个小部件实例重新定义了 jquery-ui 自动完成 _renderItem 函数，因此您的第二个自动完成实例的 _renderItem 是 jquery-ui 代码中定义的默认值。

您正在使用此 $('.autocomplete').autocomplete({ ...}) 为您的 2 个输入初始化自动完成，然后您使用此指令 .data("ui-autocomplete") 获得第一个小部件实例，然后仅为此实例重新定义 _renderItem 函数。

您可以像这样为所有实例定义它：

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