Question

此代码工作正常，但第二个输入字段不显示与文本建议一起出现的图像。我很感激，如果有人可以看看，让我知道在js中需要改变什么才能使它工作。

查询示例：clinton，bush

您可以在此处查看脚本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函数。< / p>

您可以为所有实例定义它，如下所示：

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

jquery ui自动完成多个字段

1 个答案: