Question

我有一个用户输入的搜索框。在这个事件中，我试图只显示div下的相关结果。

$(document).ready(function() {
    $('#trainername').keyup(function() {
        var tr = $('.trainers_listWrap li');
        if ($(this).val().length >= 2) {
            var inputdata = $.trim($("#trainername").val());

            var noElem = true;
            var val = $.trim(this.value).toLowerCase();
            el = tr.filter(function() {
                return $(this).find('.mt-radio').text().toLowerCase().match("^" + val);
            });
            if (el.length >= 1) {
                noElem = false;
            }
            tr.not(el).fadeOut();
            el.fadeIn();
        } else {
            tr.fadeIn();
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<div class="modal-content">
    <form id="trainerinsertform" name="trainerinsertform" class="form-horizontal bv-form" novalidate="novalidate">
        <button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
        <div class="modal-body addTrainerContainer">
            <section class="addTrainer_search">
                <div class="row-fluid">
                    <span id="errmsgtrainer"></span>
                    <div class="form-group last">
                        <input type="text" id="trainername" name="trainername" value="" autocomplete="off" maxlength="20" class="form-control" data-bv-field="trainername">
                        <small class="help-block" data-bv-validator="notEmpty" data-bv-for="trainername" data-bv-result="NOT_VALIDATED" style="display: none;">Trainer Name cannot be empty</small><small class="help-block" data-bv-validator="stringLength"
                        data-bv-for="trainername" data-bv-result="NOT_VALIDATED" style="display: none;">Please enter a value with valid length</small>
                    </div>
                </div>
            </section>
            <section class="trainers_listWrap">
                <li>
                    <label class="mt-radio mt-radio-outline traine">
                        <input type="radio" data-value="One" class="trainerradio" value="15" name="One">One
                        <span></span>
                    </label>
                </li>
                <li>
                    <label class="mt-radio mt-radio-outline traine">
                        <input type="radio" data-value="Two" class="trainerradio" value="1" name="Two">Two
                        <span></span>
                    </label>
                </li>
                <li>
                    <label class="mt-radio mt-radio-outline traine">
                        <input type="radio" data-value="Three" class="trainerradio" value="23" name="Two">Two
                        <span></span>
                    </label>
                </li>
                <li>
                    <label class="mt-radio mt-radio-outline traine">
                        <input type="radio" data-value="Four" class="trainerradio" value="10" name="Two">Two
                        <span></span>
                    </label>
                </li>
            </section>
        </div>
    </form>
</div>

http://jsfiddle.net/cod7ceho/368/

你能告诉我如何解决这个问题

Answer 1

我想这就是你想要的？ JSFiddle

从"^"中删除了.find() 已移除var inputdata，因为它未被使用。修复了HTML语法

如何在keyup上过滤DIV内容

1 个答案: