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

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

1 个答案: