自动完成焦点显示默认下拉似乎不起作用

Question

我想为文本框使用自动完成菜单，但不必在获得结果之前输入内容，我希望菜单首先在焦点上弹出所有可用选项，然后在您输入时缩小。

问题是我尝试了焦点但没有成功：

这是我的代码：

 var neighborhood_name = ["LA","NW","SE","GF"];
var statuses = [];


$(document).ready(function() {
    BindControls();
});

function BindControls() {

    $('#services').autocomplete({
        source: neighborhood_name,
        minLength: 0,
        scroll: true
    }).focus(function() {
        $(this).autocomplete("search", "");
    });
} 

我正在使用以下 jQuery

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js

每当我点击我的输入时，我都会收到以下错误：$(...).autocomplete 不是焦点功能，虽然它在我开始输入内容时有效，但在我想查看完整列表时无效。 \

有什么线索吗？

谢谢！

Answer 1

确保您已包含 Jquery UI 库。

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

因此您将同时包含 Jquery 和 Jquery UI。

[编辑]

这是工作代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" ></script>

<input type="text" id="services" value="" />
<script>
 var neighborhood_name = ["LA","NW","SE","GF"];
var statuses = [];


$(document).ready(function() {
    BindControls();
});

function BindControls() {

    $('#services').autocomplete({
        source: neighborhood_name,
        minLength: 0,
        scroll: true
    }).focus(function() {
        $(this).autocomplete("search", "");
    });
} 

</script>