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

Question

我正在用Bootstrap 2.3.2做一个快速搜索表单。我在输入字段的lhs上使用下拉框，然后在rhs上使用提交按钮，如下所示：

我希望用户先从列表中选择类别，然后在键入关键字并提交时选择类别。搜索将能够从列表中筛选标签，然后将匹配的标签粘贴到下面的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() );
    });
});

演示