Javascript 未捕获类型错误：无法读取属性'；长度'；从wp中检索标记时的空值

我正在尝试使用jquery自动完成从

wordpress db

首先，我在wp中设置了一个函数：

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

        wp_enqueue_script( 'yourtheme_custom', get_template_directory_uri().'/js/tags.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
        ) );
    }
}

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' );

    }
}

然后我创建了一个js：

$(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 ) );
            }) );
        }
    });

});

$（文档）.ready（函数（$）{
“严格使用”；
var autocomplete\u terms=JSON.parse（yourtheme\u autocomplete.autocomplete）；
变量映射={
“a”：“a”，
“o”：“o”，
“å”：“a”，
“č”：“c”
};
变量规格化=函数（术语）{
var ret=“”；
对于（变量i=0；i

最后，我的意见是：

<input class="form-control" id="tags">

但一旦我开始打字，我就会得到：

未捕获的TypeError:无法读取null的属性“length”

及

在a.（示例路径/匿名函数）。（匿名函数）.source

---

如果您使用的是Divi，那么可能是文件链接的问题。链接为操作选择设置的每个文件。

我就是这样解决的：

在函数php中，我运行ajax循环我的类别列表，并检查用户键入的内容是否存在，否则我让他自己编写：

  add_action( 'wp_footer', 'ajax_fetch' );
  function ajax_fetch() {

?>

  <script type="text/javascript">
  function fetch(){

      jQuery.ajax({
          url: '<?php echo admin_url('admin-ajax.php'); ?>',
          type: 'post',
          data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
          success: function(data) {
                var dataArray = data.split("|");
                 jQuery( "#keyword" ).autocomplete({
                  source: dataArray
                });
          }
      });

  }
  </script>

<?php
  }

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');

function data_fetch(){
    $key = $_POST['keyword'];
    $args = array(
      'orderby' => 'id',
      'hide_empty'=> 0,
      'name__like' => $key
  );
  $categories = get_categories($args);
  foreach ($categories as $cat) {
    echo $cat->name."|";
  }
  die();
}

add_操作（'wp_footer'，'ajax_fetch'）；
函数ajax_fetch（）{
?>
函数fetch（）{
jQuery.ajax({
url:“”，
键入：“post”，
数据：{action:'data_fetch'，关键字：jQuery（'#关键字'）.val（）}，
成功：功能（数据）{
var dataArray=data.split（“|”）；
jQuery（“#关键字”）.autocomplete({
资料来源：dataArray
});
}
});
}
看起来$.grep中的值是空的。试试
value=value.label | | | | value.value | | | | |
；@bigless nothing，仍然是相同的错误。如果（term.length）

，则只运行for循环。这样，如果term为空，则不会中断并规范化返回空字符串。好的，我会试试@James

if（term.length）

如果仍然出现null抛出错误。。

<div class="ui-widget">
  <label for="keyword">Tags: </label>
  <input id="keyword"  onkeyup="fetch()">
</div>

function add_scripts(){
  wp_enqueue_script( 'jquery-ui-autocomplete' );
}
add_action('wp_enqueue_scripts', 'add_scripts');

function add_stylesheet_to_head() {
  echo "<link href='https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css' rel='stylesheet' type='text/css'>";
}