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

}); 

希望這會有所幫助。