莊生趣味 » 網站 / 使用 jQuery UI API -Autocomplete Widget 自動完成關鍵字輸入

有什麼趣味？紀錄自己生活的趣味

網站 / 使用 jQuery UI API -Autocomplete Widget 自動完成關鍵字輸入

Post author:莊幸諺
Post published:2022-04-05
Post category:WordPress

文章索引

Post Views: 74

很多網站都有輸入框自動完成的功能

例如：google的搜尋

這樣可以很方便找出關鍵字

後來發現網站可以透過 jQuery UI API -Autocomplete Widget來做到相同的功能

首先，要在網頁載入必要的函式庫

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

基本的操作如下

$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

而我想要讓網站內建的搜尋輸入框，也能夠自動完成與顯示網站內的文章分類

例如：輸入 V的時候，能夠帶出VBA…

因此就必須利用wordpress內建函式get_terms()來取得所有的分類

再配合autocomplete()的設定，將結果輸出成字串，加入到 source :[ ]內

以下的程式碼利用「程式碼片段」加在網頁的footer

$taxonomies = get_terms( array(
	'taxonomy' => 'category', 
	'hide_empty' => false
) );
	
if ( !empty($taxonomies) ) :
    foreach( $taxonomies as $category ) {
        if( $category->parent == 0 ) {
             
            //remove uncategorized from loop
            if( $category->slug == 'uncategorized' ){
                continue;
            }
 
            //Parent category information
            //echo esc_html__($category->name, 'text-domain');
            
 
            //Sub category information
			
            foreach( $taxonomies as $subcategory ) {
                if($subcategory->parent == $category->term_id) {
                    //echo esc_html__($subcategory->name, 'text-domain')."</BR>";
					$s1 .= '"'.esc_html__($subcategory->name, 'text-domain').'"'.",";   //.= 字串累加
					//$s1 .= '"'.$subcategory->name.'"'.",";
					//echo $s1;
                }
            }
         }
    }
endif;
$s1=substr($s1,0,-1); //移除最後一個字元 ,
$s2= str_replace("amp;", "",  $s1); //移除amp;
//$s3= str_replace(" ", "",  $s2);  
?>

<script>
jQuery("#gsc-i-id1").autocomplete({
  appendTo: "#custom_html-2",
  source: [ <?php echo $s2;  ?> ]
});	
	
jQuery("#ocean-search-form-1").autocomplete({
  source: [ <?php echo $s2;  ?> ]
});

jQuery("#ocean-search-form-2").autocomplete({
  source: [ <?php echo $s2;  ?> ]
});	

</script>