输入框中的自动建议在 WordPress 同一页面上的第二个输入框中不起作用答案

【问题标题】：Auto suggesion in Input box not working in second Input box on same page in WordPress输入框中的自动建议在 WordPress 同一页面上的第二个输入框中不起作用
【发布时间】：2018-08-22 15:27:44
【问题描述】：

我正在我的 WordPress 网站中制作一个自动建议输入框。它适用于一个输入框，但不适用于同一页面上的第二个框。这是我的代码。在子主题的function.php中。

    function mysite_js() {
    wp_enqueue_script('autocomplete', get_stylesheet_directory_uri().'/js/jquery.auto-complete.js', array('jquery'));

    wp_enqueue_script('mysite-js', get_stylesheet_directory_uri().'/js/mysite.js', array('jquery', 'autocomplete'));

    wp_enqueue_style('autocomplete.css', get_stylesheet_directory_uri().'/js/jquery.auto-complete.css');

}
add_action('wp_enqueue_scripts', 'mysite_js');



add_action('wp_ajax_nopriv_get_listing_names', 'ajax_listings');
add_action('wp_ajax_get_listing_names', 'ajax_listings');

function ajax_listings() {
    global $wpdb;


    $name = $wpdb->esc_like(stripslashes($_POST['name'])).'%'; //escape for use in LIKE statement
    $sql = "select post_title 
        from $wpdb->posts 
        where post_title like %s 
        and post_type='portfolio' and post_status='publish'";

    $sql = $wpdb->prepare($sql, $name);

    $results = $wpdb->get_results($sql);

    //copy the business titles to a simple array
    $titles = array();
    foreach( $results as $r )
        $titles[] = addslashes($r->post_title);

    echo json_encode($titles); 

    die(); 
}

如您所见，我已将 mysite.js 文件用于我的 jquery。这个文件的代码是..

jQuery(document).ready(function($) {    

    $('#ews-search').autoComplete({
        source: function(name, response) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/wp-admin/admin-ajax.php',
                data: 'action=get_listing_names&name='+name,
                success: function(data) {
                    response(data);
                }
            });
        }
    });

});

jQuery(document).ready(function($) {    

    $('#ews-search1').autoComplete({
        source: function(name, response) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/wp-admin/admin-ajax.php',
                data: 'action=get_listing_names&name='+name,
                success: function(data) {
                    response(data);
                }
            });
        }
    });

});

jQuery(document).ready(function($) {
  $('#content .ews-search-class').attr('id','ews-search1');
});

输入框的HTML是

<input name="ofsearch" placeholder="Region" value="shag" id="ews-search" class="ews-search-class" autocomplete="off" style="" type="text">
    <div id="content">
    <input name="ofsearch" placeholder="Region" value="shag" id="ews-search1" class="ews-search-class" type="text"></div>

现在我真正想做的是，我使用 jQuery 更改了第二个输入框的 ID，因为两个输入框都来自具有相同 ID 的相同短代码，所以我使用 jQuery 更改了第二个框的 ID . 这是我正在工作的页面的link。请帮忙。

【问题讨论】：

“我使用 jQuery 更改了第二个输入框的 ID” - 你在何时何地这样做？当然，这需要在执行 $('#ews-search1') 之前发生。
非常感谢。你刚刚给了我解决方案。现在它正在工作。我改变了 mysite.js 。我在执行$('#ews-search1')后更改了第二个输入框的ID。

标签： jquery html wordpress autocomplete autosuggest

【解决方案1】：

在 mysite.js 中稍作改动后它就起作用了

jQuery(document).ready(function($) {   

    $('#ews-search').autoComplete({
        source: function(name, response) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/wp-admin/admin-ajax.php',
                data: 'action=get_listing_names&name='+name,
                success: function(data) {
                    response(data);
                }
            });
        }
    });

});


jQuery(document).ready(function($) {
  $('#content .ews-search-class').attr('id','ews-search1');
});

jQuery(document).ready(function($) {   

    $('#ews-search1').autoComplete({
        source: function(name, response) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/wp-admin/admin-ajax.php',
                data: 'action=get_listing_names&name='+name,
                success: function(data) {
                    response(data);
                }
            });
        }
    });

});

【讨论】：