我想在搜索表单中使用jQuery UI和自动完成。首先，我想检查是否会显示任何列表，因此我从文档中复制了代码，并将其粘贴到我的页面模板中。jQuery UI CSS和JS已加载，因为我可以在CHrome的开发工具中看到它。但是，未显示下拉列表。我在标题中添加了以下HTML。php
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
我的JS
(function($){
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
})(jQuery);
下面是我如何添加jQuery UI和搜索的代码。js公司
wp_enqueue_script(\'autocomplete\', get_template_directory_uri() .\'/js/jquery-ui.js\', array(\'jquery\'));
wp_enqueue_script(\'mysite-js\', get_stylesheet_directory_uri().\'/js/search.js\', array(\'jquery\', \'autocomplete\'));
wp_enqueue_style(\'autocomplete.css\', get_template_directory_uri() .\'/css/jquery-ui.css\');
我不知道我做错了什么。我试图在模板的不同位置添加搜索，但结果是一样的，没有显示下拉列表。我正在使用Wordpress和Understrap主题。
提前感谢您提供的提示
SO网友:Quang Hoang
我已经在本地主机上进行了测试。工作正常：）你可以检查一下。屏幕截图：http://nimb.ws/Vl1L0F
默认情况下，WP在Core中支持自动完成jQuery。你可以检查一下here. （查找关键字“jQuery UI自动完成”）。
您可以尝试遵循我的代码，然后再次测试：）
将代码添加到functions.php.
add_action( \'wp_enqueue_scripts\', \'add_scripts\' );
function add_scripts() {
wp_enqueue_style( \'jquery-ui-
styles\',\'http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\');
wp_enqueue_style( \'demo-styles\',\'https://jqueryui.com/resources/demos/style.css\');
wp_enqueue_script( \'jquery\' );
wp_enqueue_script( \'jquery-ui-autocomplete\' );
wp_enqueue_script( \'custom\', get_template_directory_uri() . \'/assets/js/custom.js\' );
}
<您创建的
custom.js（您必须仔细检查主题中包含文件custom.js的url）以编写js代码
jQuery(document).ready(function($) {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
完成！。
