php - jquery 自动完成并不适用于每个字段

Question

我使用codeigniter。我有三个类 .eghamat 的字段。我不知道为什么自动完成功能在前两个字段(INSERT VALUE HERE 1、INSERT VALUE HERE 2)中不起作用，但在第三个字段(在此处插入值 3)。

问题可能来自以下原因之一:

• PHP 代码
• $.each 循环
• ajax 调用

有人看出问题所在了吗？

html:

<div class="bg_units bu0">
        <div class="auto_box">
                <b class="search_hotel">
                <div class="mediumCell">
                        <input type="text" name="hotel_auto" class="eghamat" placeholder="INSERT VALUE HERE 1">
                </div>
                <ul class="list_autobox_hotel">
                </ul>
                </b>
        </div>
</div>

<div class="bg_units bu1">
        <div class="auto_box">
                <b class="search_hotel">
                <div class="mediumCell">
                        <input type="text" name="hotel_auto" class="eghamat" placeholder="INSERT VALUE HERE 2">
                </div>
                <ul class="list_autobox_hotel">
                </ul>
                </b>
        </div>
</div>

<div class="bg_units bu2">
        <div class="auto_box">
                <b class="search_hotel">
                <div class="mediumCell">
                        <input type="text" name="hotel_auto" class="eghamat" placeholder="INSERT VALUE HERE 3">
                </div>
                <ul class="list_autobox_hotel">
                </ul>
                </b>
        </div>
</div>

php:

function auto_complete() {
    $hotel_search = $this ->input-> post('hotel_auto');

    $query = $this->db->query("SELECT * FROM hotel_submits WHERE name LIKE '%$hotel_search%' ORDER BY name asc");
    if($query->num_rows()==0){
        return '0';
    }else{
        $data = array();
        foreach ($query->result() as $row)
        {
           $units = json_decode($row->units);
           $data[] = array('name' => $row->name, 'units' =>$units );
        }
    }

    echo json_encode($data);        
}

jQuery:

$('.auto_complete_eghamat').live('keyup',function () {
    var $this = $(this),
    $div = $this.closest('div.bg_units'),
    bu_num =  '.' + $div.attr('class').split(" ")[1];
    var dataObj = $(this).closest('form').serialize();
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: 'auto_complete',
        data: dataObj,
        cache: false,
        success: function (data) {
            //alert(dataObj);
            var id_name = $(bu_num+' .list_autobox_hotel').attr('id');
            $(bu_num+' .list_autobox_hotel').show().html('');
            if (data == 0) {
                $(bu_num+' .search_hotel').show().html('<p><b>there is no</b></p>');
            } else {
                $.each(data, function (index, value) {
                    $('<p id="' + value.name + '">' + value.name + '</p>').appendTo(bu_num+' .list_autobox_hotel');
                });
                $('body').click(function () {
                    $(".list_autobox_hotel p").hide().remove();
                    $('.auto_complete').val('');
                    $('.list_autobox_hotel').show().html('');
                    $('.list_autobox_hotel').css('display', 'none');
                });
            }
        },
        "error": function (x, y, z) {
            // callback to run if an error occurs
            alert("An error has occured:\n" + x + "\n" + y + "\n" + z);
        }
    });
});

Answer 1

能否请您重命名id="tour" 和id="hotel" 因为html 不能多次使用相同的id

id="游览" 还有

id="hotel" 

在代码中出现了3次，请仔细查看。