Jquery的自动完成功能并不适用于每个字段


jquery auto complete does not work on every field

我使用codeigniter。我有三个域,类是.eghamat。我不知道为什么自动完成不工作在前两个领域(INSERT VALUE HERE 1, INSERT VALUE HERE 2),但在第三(INSERT VALUE HERE 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);
        }
    });
});

能否重新命名id="tour"id="hotel" cz html不能有相同的id多次

id="tour"还有

id="hotel" 

在代码中出现了3次,所以请查看一下

你能试一下吗?让我知道。你的admin.js应该是这样的

$(document).ready(function () {
        $('.list_autobox_hotel p').click(function() {               
            $(this).parent().parent().find('.eghamat').val($(this).text());             
            }); 
        $(document).click(function() {
            if($('.list_autobox_hotel').is(':visible')){
                $('.list_autobox_hotel').hide(); 
            }
            return true;
            });

        ////////////////////////////////////////////////////////////////
        $('#loadingDiv').hide() // hide it initially
        .ajaxStart(function () {
            $(this).show();
        }).ajaxStop(function () {
            $(this).hide();
        });
        ///////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();
            //alert(dataObj);
            $.ajax({
                type: "POST",
                dataType: 'json',
                //url: 'binboy.gigfa.com/admin/…',
                url: 'auto_complete',
                data: dataObj,
                cache: false,
                success: function (data) {
                    //alert(bu_num);
                    var id_name = $(bu_num + ' .list_autobox_hotel').attr('id');
                    $(bu_num + ' .list_autobox_hotel').show().html('');
                    if (data == 0) {
                        $(bu_num + ' .list_autobox_hotel').show().html('<p><b>there is no</b></p>');
                    } else {
                        $.each(data, function (index, value) {
                            $('<p >' + value.name + '</p>').appendTo(bu_num + ' .list_autobox_hotel');
                        });
                    }
                },
                "error": function (x, y, z) {
                    // callback to run if an error occurs
                    alert("An error has occured:'n" + x + "'n" + y + "'n" + z);
                }
            });
        });
    });

下面是一段简单的代码

$('.eghamat').click(function(){
    var id  =$(this).attr('id');
    //Here you have the id select with it and put your code in it
});
相关文章: