WordPress中的jQuery自动完成

Question

我试图在使用PHP脚本的wordpress网站上设置自动完成。但是目前我的代码中没有显示任何内容。我明白，一般的想法是有一个jQuery函数，它会使用PHP脚本来提取MySQL数据（suggest.php）。另外如果我要把

<script> 
    $(function() { 
    $("#tags").autocomplete({ 
     source: 'suggest.php', 
     minLength:1 

    }); 
    }); 
</script> 

在myScript.js下的js文件夹下，我将如何访问它？我的完整代码如下...

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
<script> 
    $(function() { 
    $("#tags").autocomplete({ 
     source: 'suggest.php', 
     minLength:1 

    }); 
    }); 
</script> 

<form action="" method="post"> 
Name: <input type="text" name="tags" id="tags" value="<?php echo isset($_POST['tags']) ? $_POST['tags'] : '' ?>"/> 
</form> 

Answer 1

首先，不包括整个jquery-ui，这是完全没有必要的。

其次，不要手动放置脚本。这就是为什么WordPress有enqueuing。

首先，您需要将脚本排入自动完成的位置，并且必须依赖于自动完成。因此，在您functions.php你把

add_action('after_setup_theme', 'yourtheme_theme_setup'); 

if (! function_exists('yourtheme_theme_setup')) { 
    function yourtheme_theme_setup() { 

     add_action('wp_enqueue_scripts', 'yourtheme_frontend_scripts'); 

    } 
} 

if (! function_exists('yourtheme_frontend_scripts')) { 
    function yourtheme_frontend_scripts() { 

     wp_enqueue_script('yourtheme_custom', get_template_directory_uri().'/js/custom.js', array('jquery-ui-autocomplete', 'jquery'), '1.0.0', true); 

     wp_localize_script('yourtheme_custom', 'yourtheme_autocomplete', array(
      'autocomplete' => json_encode($results_array), // Results array contains all your autocomplete words 
     )); 
    } 
} 

你怎么打电话给你.js文件是由你。我把它称为custom.js，并把它放在主题中的/ js文件夹中。

您还需要一个$results_array，其中包含您的所有自动完成单词。我通常手动把它们，或者如果需要查询数据库。

然后在你的custom.js你会把这样的事情：

jQuery(document).ready(function($) { 
    "use strict"; 

    var autocomplete_terms = JSON.parse(yourtheme_autocomplete.autocomplete); 


    $('#tags').autocomplete({ 
     source: autocomplete_terms, 
     minLength: 1 
    }); 

}); 

应该工作的罚款。一个很酷的补充是，如果你有口音或拉丁扩展术语是将它们添加到口音地图

jQuery(document).ready(function($) { 
    "use strict"; 

    var autocomplete_terms = JSON.parse(yourtheme_autocomplete.autocomplete); 

    var accentMap = { 
     "ä": "a", 
     "ö": "o", 
     "å": "a", 
     "č": "c" 
    }; 

    var normalize = function(term) { 
     var ret = ""; 
     for (var i = 0; i < term.length; i++) { 
      ret += accentMap[ term.charAt(i) ] || term.charAt(i); 
     } 
     return ret; 
    }; 

    $('#tags').autocomplete({ 
     source: function(request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
      response($.grep(autocomplete_terms, function(value) { 
       value = value.label || value.value || value; 
       return matcher.test(value) || matcher.test(normalize(value)); 
      })); 
     } 
    }); 

}); 

希望这会有所帮助。