如何在 wordpress 中创建自动完成文本框？

Question

您好，我正在开发一个 wordpress 插件。

我尝试了在自定义表单中创建自动完成文本框的代码。

Ajax 调用函数

function city_action_callback() {     
    global $wpdb;
    $city=$_GET['city'];
    $result =   $mytables=$wpdb->get_results("select * from ".$wpdb->prefix . "mycity where city like '%".$city."'" );   
    $data = "";
    foreach($result as $dis)
        {
            $data.=$dis->city."<br>";
        }    
    echo $data;
    die();
    }
add_action( 'wp_ajax_city_action', 'city_action_callback' );
add_action( 'wp_ajax_nopriv_city_action', 'city_action_callback' );

简码函数

function my_search_form()  {
?>
<script>
jQuery(document).ready(function($) {
        jQuery('#city').keyup(function() { 
                cid=jQuery(this).attr('val');
                var ajaxurl="<?php echo admin_url( 'admin-ajax.php' ); ?>"; 
                var data ={ action: "city_action",  city:cid    };
                $.post(ajaxurl, data, function (response){
                          //alert(response);
                        });
                });
});
</script>

 <input type="text" id="city"  name="city" autocomplete="off"/>

<?php
}

此代码在可变响应中完美返回相关结果。

但我不知道如何创建一个看起来像自动完成框的文本框。

请解释一下如何在 wordpress 中做到这一点？

Answer 1

只需在输入标签下添加一个div

HTML 代码：

<input type="text" id="city" name="city" autocomplete="off"/> <div id="key"></div>

在你 ajax 成功后替换 div。

Ajax 代码：

            var ajaxurl="<?php echo admin_url( 'admin-ajax.php' ); ?>"; 
            var data ={ action: "city_action",  city:cid    };
            $.post(ajaxurl, data, function (response){
                     $('#key').html(response);
                    });

PHP 代码：

            function city_action_callback() {     
            global $wpdb;
            $city=$_GET['city'];
            $result =   $mytables=$wpdb->get_results("select * from ".$wpdb->prefix . "mycity where city like '%".$city."'" );   
            $data = "";
            echo '<ul>'
            foreach($result as $dis)
            {
              echo '<li>'.$dis->city.'</li>';
            }
            echo '</ul>'    
            die();
            }