时间戳

首页 > 解决方案 > 加载到引导模式时，我的搜索输入不起作用

jquery - 加载到引导模式时，我的搜索输入不起作用

问题描述

我有搜索输入，当用户输入邮政编码时，它会打开一个模式并显示送货地址。

当模式打开时，信息显示正常，但是当用户将邮政编码输入到现在处于模式中的搜索输入中时 - 结果不会刷新。

输入字段是一个实时搜索，它只是用户交互的第一个搜索的副本。

下面是我的 HTML

第一个搜索栏

                        <div class="col-12 click-collect--container px-0">
                                <form>
                                <label for="postcode" class="d-inline-block w-100">Find your nearest pick up point</label>
                                    <div>
                                    <input class="form-control float-left" id="search" name="search" placeholder="Search by postcode" type="text">
                                    <input class="btnpostcode btn btn-primary" data-target="#exampleModalLive" data-toggle="modal" id="Btn_Search" name="BtnPostCode" value="Search >">
                                    </div>

                                </form>
                        </div>

这是带有搜索输入的模式的 HTML

<div class="modal" id="exampleModalLive" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Click and Collect</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                    <div id="count"></div>
                                                                <div class="col-12 click-collect--container px-0">
                                <form>
                                <label for="postcode" class="d-inline-block w-100">Find your nearest pick up point</label>
                                    <div>
                                    <input class="form-control float-left" id="search" name="search" placeholder="Search by postcode" type="text">
                                    <input class="btnpostcode btn btn-primary" id="Btn_Search" name="BtnPostCode" value="Search >">
                                    </div>

                                </form>
                        </div>
                        <ul class="list-group mt-3" id="result"></ul>
                    </div>
                    <div class="col-6">
                        <div class="d-inline-block w-100">
                        <div id="googleMap" style="width:100%;height:300px;"></div>
                            <ul class="list-group" id="lat-long"></ul>
                        </div>
                        <Div class="row">
                        <div class="col-6">
                            <ul class="list-group" id="address-container"></ul>
                            <ul class="list-group" id="opening-times"></ul>
                        </div>
                        <div class="col-6">
                            <div id="del-lists-wrapper"> </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的 jQuery

    $('#search').blur(function() {
        $('#result').html('');
        $('#lat-long').html('');
        $('#opening-times').html('');
        $('#del-lists-wrapper').html('');
        var searchField = $('#search').val();
        var expression = new RegExp(searchField, "i");
        $.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
            //console.log('json')
            $.each(data, function(key, value) {

                if (value.address.postcode.search(expression) != -1) {
                //console.log(value)
                    //COURIER ADDRESS DETAILS
                    $('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="address"> ' + value.address.name + ',' + value.address.line1 + ',' + value.address.town + ',' + value.address.county + ',' + value.address.postcode + '</div></li>');
                    //LAT AND LONG
                    var mapProp= {
                        center:new google.maps.LatLng(value.location.latitude,value.location.longitude),
                        zoom:5,
                        };
                    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

                    //OPENING TIMES
                    $('#opening-times').append('<li id=open-times-'+ key +'  class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><div class="">Mon ' + value.opening_times.Mon + ' </div><div class="">Tues ' + value.opening_times.Tues + ' </div><div class="">Wed ' + value.opening_times.Wed + ' </div><div class="">Thurs ' + value.opening_times.Thurs + ' </div><div class="">Fri ' + value.opening_times.Fri + ' </div><div class="">Sat ' + value.opening_times.Sat + ' </div><div class="">Sun ' + value.opening_times.Sun + ' </div></li>');
            // ARRAY DELIVERY OPTIONS
            var ul = $('<ul id=del-add-'+ key +' class="del-options"></ul>');
            $.each(value.delivery_options, function(key, val) {
                ul.append('<li del-id=' + key + '  class="list-group-item"><div class="c-name font-weight-bold"> ' + val.name + ' </div><div> ' + val.description + ' </div><div class="c-price font-weight-bold"> ' + val.price + ' </div><div class="btn btn-primary btn-block mt-3"><a>Select ></a></div></li>');
            });
            ul.appendTo('#del-lists-wrapper');

                    //COURIER ADDRESS FOR OTHER CONTAINER
                    $('#address-container').append('<li id=cour-add-'+ key +'  class="list-group-item alt-address"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="d-inline-block w-100"> ' + value.address.name + ' </div><div class="d-inline-block w-100"> ' + value.address.line1 + ' </div><div class="d-inline-block w-100"> ' + value.address.town + '</div><div class="d-inline-block w-100"> ' + value.address.county + ' </div><div class="d-inline-block w-100"> ' + value.address.postcode + '</div></li>');
                }
            });

        });


    });

提前感谢您的帮助。

标签： jqueryjson

解决方案

这是因为您的侦听器正在寻找名为 search 的 id 的第一个实例。您需要将第二个命名为“modal-search”之类的名称，并将其包含在“search”事件侦听器中。

$('#serach', '#modal-search')

要么做一个 class="search" 然后通过$('.search')而不是听它$('#search')

推荐阅读