Question

我试图在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');

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

从json文件中自动完成wordpress

1 个答案: