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

Posted 2023-05-09

【中文标题】如何在 wordpress 中创建自动完成文本框？

【英文标题】：how to create an autocomplete textbox in wordpress?

【发布时间】：2014-09-30 05:23:53

【问题描述】：

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

【问题讨论】：

参考这个tutsforweb.blogspot.in/2012/05/…

@cracker 其核心 php 代码。我不知道如何在wordpress插件中实现

@Boopathi 你可以在 wordpress 中使用 corephp 代码...

【参考方案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();
            

【讨论】：

好的，谢谢。如果我从设置为文本框的列表中选择任何一个。该怎么做？

这取决于您需要设置为文本框的值。如果您已经知道该值，那么在您的 php 代码中进行如下验证 if($dis->city == "Yourdesiredcity") echo $dis->city; Ajax 成功 $('#textboxid').val(response);

没有 manoj。如果我从 中选择任何值，那么这个值将被放置到文本框。

您可以使用核心php代码来wordpress。这不是问题

是的，你可以这样做 foreach($result as $dis) echo ''.$dis->city.''; echo '' 在你的脚本函数 getval(value) $('#textboxid').val(value)