WordpressでjQueryのオートコンプリート

Question

私は、PHPスクリプトを使用してWordPressのサイトにオートコンプリートを設定しようとしています。しかし、私のコードでは現在何も表示されていません。この場合、MySQLデータ（suggest.php）をプルアップするPHPスクリプトを使用するjQuery関数を持つことが一般的な考えであると私は理解しています。もし私が置くならば、私はそれをアクセスするにはどうすればいいですか？

私の完全なコードのすべての下に...

<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が含まれていません。

第2に、スクリプトを手動で配置しないでください。だからこそWordPressはenqueuingです。

まず、オートコンプリートが可能になり、それがオートコンプリートに依存しなければならないスクリプトをエンキューする必要があります。だからあなたのfunctions.phpあなたがあなたの.jsファイルを呼び出す方法

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

を置くところにあなた次第です。私はそれをcustom.jsと呼んでテーマの中の/ jsフォルダの中に入れます。

また、$results_arrayが必要です。あなたのオートコンプリートワードはすべてここにあります。私は通常、手動で入力するか、必要に応じてデータベースに問い合わせます。

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

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


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

}); 

が正常に動作する必要があります。

は、その後、あなたのcustom.jsにあなたはこのようなものを出してあげます。あなたがアクセントまたはラテンの拡張された用語をアクセントマップに追加することであるなら、クールな追加があります。

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

}); 

希望します。