如何在WordPress中创建一个自动完成的文本框？

Boopathi Rajan 发表于 Dev

Boopathi rajan

嗨，我正在开发一个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中做到这一点？

马诺伊

只需在输入标签下添加一个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();
            }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。