来自json文件的wordpress自动完成答案

【问题标题】：wordpress autocomplete from json file来自json文件的wordpress自动完成
【发布时间】：2018-04-21 13:54:54
【问题描述】：

由于数据量不大，我正在尝试从 JSON 文件在我的计算表单上添加 jquery 自动完成功能。但我没有任何建议出来，控制台上也没有显示错误。我的 js 文件已经在函数文件中被调用并被加载。

我的 JS

jQuery(document).ready(function($) {
    jQuery('#dish').keyup(function(){
    jQuery('#result').html('');
    var serachFiled = jQuery('#dish').val();
    var expression = new RegExp(serachFiled, "i");
    jQuery.getJSON('global.json', function(data){
        jQuery.each(data, function(key, value){
            if(value.name.search(expression) != -1)
            {
                jQuery('#result').append('<li class="list-dush">' + value.name + ' </li>');
            }
        });
    })
});
});

我的 JSON 文件与我的 JS 文件位于同一文件夹中

[{"id":"1","name":"lasagna","kilocal":"3.56"}, {"id":"2","name":"pasta","kilocal":"2.17"},........]

和我的 HTML 文件

<div id = "container-form">
        <div><label class="plate_label">Dish:</label><input type="text" name="dish_name[]" id="dish" class="dish" placeholder="Enter plate name"/></div>
        <ul class="list-group" id="result"></ul>
            <div><label class="quantity_label">Quantity:</label><input type="text" name="dish_quantity[]"  class="quantity" placeholder="Enter gram or pieces/slices" /></div>
        </div>

这是我在functions.php末尾添加的脚本

function mysite_files() {

wp_enqueue_script('mysite-js_search', get_stylesheet_directory_uri().'/my_functions/my_search.js', array('jquery'));

wp_enqueue_script('mysite-js', get_stylesheet_directory_uri().'/my_functions/my_js.js', array('jquery'));

wp_enqueue_style('mysite-css', get_stylesheet_directory_uri().'/my_functions/my_css.css');

wp_enqueue_script('jquery-ui-autocomplete', '', array('jquery-ui-widget', 'jquery-ui-position'), '1.8.6');

}
add_action('wp_enqueue_scripts', 'mysite_files');

【问题讨论】：

我认为 JSON 文件没有加载，因为在调用页面中，'global.json' 是相对于页面 URL 而不是 JS 文件。尝试类似：jQuery.getJSON( 'global.json' ).fail( function( xhr, status, error ){ alert( 'status: ' + status + '; error: ' + error ); } ); 以确认 JSON 文件是否已加载。
你说得对。找不到文件 JSON。所以我将 JSON 文件与我的 js 放在同一个文件夹中，现在问题是我需要使用 wp_enque_script 加载与 functions.php 中的 js 文件相同的 JSON 文件吗？
更新你的问题，添加你用来加载JS文件的PHP代码，然后我会告诉你应该怎么做。
刚刚更新...
谢谢。但我认为在 JS 文件中，您可以简单地使用 JSON 文件的完整路径。例如。如果 JS 文件位于 /wp-content/themes/my-theme/my_functions/，则在 jQuery.getJSON() 调用中使用 '/wp-content/themes/my-theme/my_functions/global.json'。

标签： jquery json wordpress

【解决方案1】：

jQuery.noConflict();
jQuery(document).ready(function($) {
var m = ["lasagna","pasta",......,"fish curry"]; 

jQuery('.dish').autocomplete({
search: function(event, ui) {
  setTimeout(() => {
    let w = jQuery(this).autocomplete("widget").find("div"),
      re = new RegExp("("+this.value+")", "i");
    w.html((i, html) =>

      html.replace(re, "<b>$1</b>")
    );
  },100);
},
source: m
});
});

【讨论】：