javascript - 如何使搜索表单从类别中找到匹配项，然后将值粘贴到 div 中？

Question

我正在使用 Bootstrap 2.3.2 进行快速搜索表单。我在输入字段的左侧使用下拉菜单，然后在右侧使用提交按钮，如下所示:

我希望用户首先从列表中选择类别，然后在输入关键字并提交时。搜索将能够从列表中过滤标签，然后将匹配的标签粘贴到下面的 div 中。

我使用的JS是:

$(function () {
var data = [...];

function result(message) {
    $("<div>").text(message).prependTo("#result");
    $("#result").scrollTop(0);
}

$("#index-search").submit(function () {
    if ($(".dropdown-menu").text() === data.val(ui.item.id) {
        return;
    });
});

但我不知道如何使用所选标​​签过滤结果。

有人可以帮我解决这个问题吗？谢谢

JsFiddle 链接在这里:Link

Answer 1

我想您正在寻找这样的解决方案，

JS

$(".dropdown-menu").on('click', 'li a', function () {
    $(".btn:first-child").text($(this).text());
});

$(document).ready(function () {
    var data = [{
        value: "Full A",
        id: "10",
        label: "Client"
    }, {
        value: "A La",
        id: "2",
        label: "ID"
    }, {
        value: "B RDE",
        id: "3",
        label: "Description Needed"
    }, {
        value: "M Smoth",
        id: "45",
        label: "Room"
    }, {
        value: "Steven C",
        id: "6",
        label: "Kitchen"
    }, {
        value: "Ada B",
        id: "78",
        label: "Bathroom"
    }];

    function result(message) {
        $("<div>").text(message).prependTo("#result");
        $("#result").scrollTop(0);
    }

    $("#index-search").submit(function (e) {
        e.preventDefault();
        var filterBy = $(".dropdown-toggle").text().toLowerCase();
        var val = data.filter(function(e){
            return e[filterBy].toLowerCase() == $("#appendedPrependedDropdownButtons").val().toLowerCase();

        });
        console.log(val);
        result(val.length ?
                   "Selected: " + val[0].value + " aka " + val[0].id:
          "Nothing selected, input was " + $("#appendedPrependedDropdownButtons").val() );
    });
});

DEMO