应用jquery-chosen选择对话框模态中的输入看起来很糟糕

时间:2019-03-27 09:14:01

标签: jquery laravel-5 jquery-chosen

在laravel 5.8 / Bootstrap v4.1.2(/ jquery jQuery v3.3.1应用程序中,我使用的是Chosen版本1.8.7,我需要打开对话框模式     有几行和文本/选择输入。最后选择一项,我要选择它,因为它可以搜索搜索功能。 我喜欢:

var href = '/admin/show-todo-page';
$.ajax(
    {
        type: "GET",
        dataType: "json",
        url: href,
        success: function (response) {
            $("#div_show_todo_page_modal").modal({
                "backdrop": "static",
                "keyboard": true,
                "show": true
            });
            $('#div_show_todo_page_content').html(response.html)

            $(".chosen_select_box").chosen({
                disable_search_threshold: 10,
                no_results_text: "Nothing found!",
                allow_single_deselect: true,
            });

response.html具有如下代码:

<form role="form" autocomplete="off">

    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-12 p-1">
            <input type="hidden" id="todo_id_0" name="todo_id_0" value="1" class="todo_editable_field todo_editable_field_id">
            <input type="hidden" id="todo_modified_0" name="todo_modified_0" value="" class="todo_editable_field
                            todo_editable_field_modified">
            <input class="form-control todo_editable_field todo_editable_field_text editable_field"
                   value="Write user's on using frontend application part lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut."
                   id="todo_text_0" name="todo_text_0" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task"
                   onchange="javascript:backendFooter.todoOnChange(this); ">
        </div>

        <div class=" col-3 p-1 m-0 mb-4">
            <select class="form-control todo_editable_field editable_field" id="todo_priority_0" name="todo_priority_0" data-placeholder=" -Select Is Featured- "
                    onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Priority- "></option>
                <option value="1">No</option>
                <option value="2">Low</option>
                <option value="3">Normal</option>
                <option value="4" selected="">High</option>
                <option value="5">Urgent</option>
                <option value="6">Immediate</option>
            </select>
        </div>
        <div class=" col-3 p-1">
            <select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_0" name="todo_completed_0"
                    data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Completed- "></option>
                <option value="1">Completed</option>
                <option value="0" selected="">Opened</option>
            </select>
        </div>
        <div class=" col-5 p-1">
            <select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_0" name="todo_foruserid_0"
                    data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
                <option value="" label=" -Select User- "></option>
                        ... long list ...
                <option value="5" selected="">Admin ( Soang Soang, admin@mail.com )</option>
            </select>
            <div class="chosen-container chosen-container-single" title="" id="todo_foruserid_0_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
                <span>Admin ( Soang Soang, admin@mail.com )</span><abbr class="search-choice-close"></abbr>
                <div><b></b></div>
            </a>
                <div class="chosen-drop">
                    <div class="chosen-search">
                        <input class="chosen-search-input" type="text" autocomplete="off">
                    </div>
                    <ul class="chosen-results"></ul>
                </div>
            </div>
        </div>

        <div class=" col-1 p-1">
                                                            <span class="input-group-append-btn">
                                <button class="btn btn-danger todo-btn-add" type="button">
                                    <span class="fa fa-minus"></span>
                                </button>
                            </span>
        </div>

    </div>
    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-12 p-1">
            <input type="hidden" id="todo_id_1" name="todo_id_1" value="3" class="todo_editable_field todo_editable_field_id">
            <input type="hidden" id="todo_modified_1" name="todo_modified_1" value="" class="todo_editable_field
                            todo_editable_field_modified">
            <input class="form-control todo_editable_field todo_editable_field_text editable_field"
                   value="Prepare list of user's having access to backend part lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut..."
                   id="todo_text_1" name="todo_text_1" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task"
                   onchange="javascript:backendFooter.todoOnChange(this); ">
        </div>

        <div class=" col-3 p-1 m-0 mb-4">
            <select class="form-control todo_editable_field editable_field" id="todo_priority_1" name="todo_priority_1" data-placeholder=" -Select Is Featured- "
                    onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Priority- "></option>
                <option value="1">No</option>
                <option value="2" selected="">Low</option>
                <option value="3">Normal</option>
                <option value="4">High</option>
                <option value="5">Urgent</option>
                <option value="6">Immediate</option>
            </select>
        </div>
        <div class=" col-3 p-1">
            <select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_1" name="todo_completed_1"
                    data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Completed- "></option>
                <option value="1">Completed</option>
                <option value="0" selected="">Opened</option>
            </select>
        </div>
        <div class=" col-5 p-1">
            <select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_1" name="todo_foruserid_1"
                    data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
                <option value="" label=" -Select User- "></option>
                        ... long list ...
                <option value="5">Admin ( Soang Soang, admin@mail.com )</option>
            </select>
            <div class="chosen-container chosen-container-single" title="" id="todo_foruserid_1_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
                <span>Martha Lang ( Lang Lang, nilovsergey@ukr.net )</span><abbr class="search-choice-close"></abbr>
                <div><b></b></div>
            </a>
                <div class="chosen-drop">
                    <div class="chosen-search">
                        <input class="chosen-search-input" type="text" autocomplete="off">
                    </div>
                    <ul class="chosen-results"></ul>
                </div>
            </div>
        </div>

        <div class=" col-1 p-1">
                                                            <span class="input-group-append-btn">
                                <button class="btn btn-danger todo-btn-add" type="button">
                                    <span class="fa fa-minus"></span>
                                </button>
                            </span>
        </div>

    </div>
    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-12 p-1">
            <input type="hidden" id="todo_id_2" name="todo_id_2" value="2" class="todo_editable_field todo_editable_field_id">
            <input type="hidden" id="todo_modified_2" name="todo_modified_2" value="" class="todo_editable_field
                            todo_editable_field_modified">
            <input class="form-control todo_editable_field todo_editable_field_text editable_field" value="To do line 2..." id="todo_text_2" name="todo_text_2" type="text"
                   maxlength="255" autocomplete="off" placeholder="Enter new todo task" onchange="javascript:backendFooter.todoOnChange(this); ">
        </div>

        <div class=" col-3 p-1 m-0 mb-4">
            <select class="form-control todo_editable_field editable_field" id="todo_priority_2" name="todo_priority_2" data-placeholder=" -Select Is Featured- "
                    onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Priority- "></option>
                <option value="1">No</option>
                <option value="2">Low</option>
                <option value="3" selected="">Normal</option>
                <option value="4">High</option>
                <option value="5">Urgent</option>
                <option value="6">Immediate</option>
            </select>
        </div>
        <div class=" col-3 p-1">
            <select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_2" name="todo_completed_2"
                    data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Completed- "></option>
                <option value="1" selected="">Completed</option>
                <option value="0">Opened</option>
            </select>
        </div>
        <div class=" col-5 p-1">
            <select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_2" name="todo_foruserid_2"
                    data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
                <option value="" label=" -Select User- "></option>
                        ... long list ...
                <option value="5" selected="">Admin ( Soang Soang, admin@mail.com )</option>
            </select>
            <div class="chosen-container chosen-container-single" title="" id="todo_foruserid_2_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
                <span>Admin ( Soang Soang, admin@mail.com )</span><abbr class="search-choice-close"></abbr>
                <div><b></b></div>
            </a>
                <div class="chosen-drop">
                    <div class="chosen-search">
                        <input class="chosen-search-input" type="text" autocomplete="off">
                    </div>
                    <ul class="chosen-results">
                        <li class="active-result" data-option-array-index="1">yolanda_konopelski ( Konopelski Konopelski, yolanda.konopelski@homenick.org )</li>
                        ... long list ...
                        <li class="active-result result-selected" data-option-array-index="41">Admin ( Soang Soang, admin@mail.com )</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class=" col-1 p-1">
                                                            <span class="input-group-append-btn">
                                <button class="btn btn-success todo-btn-add" type="button">
                                    <span class="fa fa-plus"></span>
                                </button>
                            </span>
        </div>

    </div>

</form>

其中id为“ todo_foruserid_N”的select具有“ chosen_select_box”类,并且所选功能已附加到该类。 但是在对话框表格a上,我看到非常糟糕的选择输入,例如https://imgur.com/a/aU45B5s 如果在选择中不使用selected_select_box类,则将其呈现为普通选择输入,但没有搜索功能?

如何解决?

修改后的块: 我通过https://www.votes.nilov-sergey-demo-apps.tk/admin/dashboard网址在线上传了此部分 您可以在模拟信用证下登录系统:投票_demo@votes.com / 654321 打开仪表板页面时,将弹出对话框。

0 个答案:

没有答案