自动完成未出现在模态中

时间:2018-11-22 11:10:58

标签: jquery bootstrap-modal jquery-ui-autocomplete

我的自动完成功能出现问题。

我正在尝试以以下形式在引导程序模式中使用jquery自动完成功能

<form id="myForm" action="/platformDev/create_subscription.php" method="POST">
        <label class="control-label"><strong>Select Period</strong></label>
        <?php
            $query              =   "Select id as data_value, stock_date_str as data_name from view_stocktake_master";
            $id_value           =   "stocktake_id";
            $name_value         =   "stocktake_id";
            $lstr_stocktake     =   f_get_dropdown("id", "stock_date_str", "view_stocktake_master", '', "stocktake_id", "store_id = '$store_id'", '', '', ' id desc', true, false, true);

            echo $lstr_stocktake; ?> <br>
        <strong>Product Name:</strong> <span class="required_field"><i class="fa fa-star fa-sm"></i>   </span> <form autocomplete="off"><input  autofocus type="text" required class="form-control-login waste_details_items"   name="waste_details_items" tabindex="1"/>   <br/>
        <strong>Quantity:</strong> <span class="required_field"><i class="fa fa-star fa-sm"></i>   </span> <form autocomplete="off"><input  autofocus type="text" autocomplete="off" required class="form-control-login"   name="waste_details" tabindex="1"/>  <br/>
        <strong>Wastage Date:</strong> <span class="required_field"><i class="fa fa-star fa-sm"></i>   </span> <form autocomplete="off"><input autocomplete="off" class="form-control-login" tabindex="3" id="date" name="date" onkeypress="return isNumberKey(event, this)" placeholder="DD/MM/YYY" type="text"/>  <br/>
        <strong>Wastage at Cost:</strong> <span class="required_field"><i class="fa fa-star fa-sm"></i>   </span> <form autocomplete="off"><input disabled  type="text" autocomplete="off" required class="form-control-login" name="waste_amount" onkeypress="return isNumberKey(event, this)" tabindex="4"/>  <br/>

            <div class="submitactions modal-footer content_container">
            <button disabled="disabled" class="btn form-btns btn-primary"  style="float: right;" data-dismiss="modal" id=""><i class="fa fa-plus fa-md"></i><span>  Add Waste</button>
            </div>

    </form>

然后进行Ajax调用以获取有关keyup事件的项目列表

$.ajax(
    {
        type: "POST",
        url: "get_products_list.php",
        data:'keyword='+$(this).val(),

        beforeSend: function(){
            current_autocomplete_parent.css("background","#FFF url(images/loaderIcon.gif) no-repeat 165px");
        },
        success: function(data)
        {
            top_offset  = $(current_autocomplete_parent).offset().top;
            left_offset = $(current_autocomplete_parent).offset().left;
            $("#autocomplete_suggestions").width($(current_autocomplete_parent).width());

            if((top_offset + 200) > $(window).height())
                top_offset  = $(current_autocomplete_parent).offset().top - 200;

            $("#autocomplete_suggestions").offset({ top: 0, left: 0});
            $("#autocomplete_suggestions").offset({ top: top_offset + 40, left: left_offset });
            $("#autocomplete_suggestions").show();
            $("#autocomplete_suggestions").html(data);
            $("#autocomplete_item_block").focus();
            current_autocomplete_parent.css("background","#FFF");
            autocomplete_bloc_visible = true;
            $("#autocomplete_suggestions").show();
        }
    });

事件被触发,结果返回,因为我在控制台中可以看到它们,但是实际的自动完成框没有出现。我可以看到loaderIcon.gif一秒钟,然后什么也看不到。

我尝试在CSS文件中更改ui-front的z-index,但这无济于事。我不太确定我要去哪里哪里。

0 个答案:

没有答案