Question

我会尽力解释这个。我一直致力于生成标签和隐藏表单输入字段的脚本，并且由于Stack用户和谷歌（我是js / jquery新手）而取得了很大进步。所需的行为是让用户选择搜索类型，输入一个带有bootstrap typeahead的值，以确保我们获得正确的值，然后在单击添加按钮或输入字段检测到＆＃34时生成标记和输入;输入＆＃34 ;.这一切都正常工作，除了在创建第一个标记/输入后，下一个的值保持与第一个相同。这是完整的脚本：

HTML标记：

<div class="quick-search row">
    <div class="span7">
        <div class="input-append input-prepend">
            <div class="btn-group">
                <button id="search-type" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
                    Search by
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a data-name="cat" data-label="type">Property Type</a></li>
                    <li><a data-name="lowprice" data-label="low price">Low Price</a></li>
                    <li><a data-name="highprice" data-label="high price">High Price</a></li>
                    <li><a data-name="bdrms" data-label="bedrooms">Bedrooms</a></li>
                    <li><a data-name="bthrms" data-label="bathrooms">Bathrooms</a></li>
                    <li><a data-name="city" data-label="city">City</a></li>
                    <li><a data-name="zip" data-label="zip">Zip Code</a></li>
                </ul>
            </div>
            <input id="input-tag" class="span4" id="appendedPrependedInput" type="text" placeholder="Select a search type..." data-provide="typeahead" value="" />
            <button id="add-tag" class="btn btn-primary"><i class="fa fa-plus"></i></button>
        </div>
        <form id="search" class="form-inline" method="get" action="/property/search">
            <div id="alert"></div>
            <div id="tag-results"></div>
            <input class="btn btn-primary" name="Search" type="submit" value="Search Properties" title="Search Properties" />
            <button class="btn btn-success">Whats My Home Worth?</button>
        </form>
    </div>
</div>

第一部分是typeahead的数组：

var obj = {
    "cat" : [
        {val: 'res', string: "Residential & Single Family Homes"},
        {val: 'Dup', string: "Duplexes & Apartments"},
        {val: 'Con', string: "Condominiums"},
        {val: 'Lot', string: "Lots, Land & Farms"},
        {val: 'Com', string: "Commercial"},
        {val: 'Mob', string: "Mobile Homes"}
    ],
    "city" : [
        <!-- TMPL_LOOP Cities -->
        {val: "<!-- TMPL_VAR city_name -->", string: "<!-- TMPL_VAR city_name -->"},
        <!-- /TMPL_LOOP -->
    ],
    "bdrms" : [],
    "bthrms" : [],
    "zip" : [],
    "lowprice" : [],
    "highprice" : [],
};
/*dynamic bedrooms*/
for(i=1; i<=5; i++){
    obj.bdrms.push({val: i.toString(), string: i.toString() + " - Bedrooms"});
}
/*dynamic fullbaths*/
for(i=1; i<=4; i++){
    obj.bthrms.push({val: i.toString(), string: i.toString() + " - Bathrooms"});
}
/*dynamic halfbaths*/
for(i=1; i<=4; i++){
    obj.bthrms.push({val: (i+.1).toString(), string: i.toString() + " - 1/2 Bathrooms"});
}
/*dynamic zipcode*/ 
for(i=43000; i<=45999;i++){
    obj.zip.push({val: i.toString(), string: i.toString()});
}
for(i=48000; i<=49999;i++){
    obj.zip.push({val: i.toString(), string: i.toString()});
}
/*dynamic lowprice*/
for(i=0; i<=1000000;){
    obj.lowprice.push({val: i.toString(), string: i.toString()});
    obj.highprice.push({val: i.toString(), string: i.toString()});
    i=i+5000;
}

第二部分是typeahead的处理程序：

/********************************
/ SEARCH TYPEAHEAD FUNCTION
/*******************************/
$(function searchTag($) {   

    var data = [];

    $('.dropdown-menu > li > a').on("click", function() {
        data = $(this).data('name');
    });

    var that = this;
    $('#input-tag').typeahead({
        source: function(query, process) {
                var results = _.map(obj[data], function(value) {
                    return value.val;
                });
                process(results);
        },
        highlighter: function(val) {
            var value = _.find(obj[data], function(p) {
                return p.val == val;
            });
            return value.string;
        },
        updater: function(val) {
            var value = _.find(obj[data], function(p) {
                return p.val == val;
            });
            that.setSelected(value);
            return value.string;
        }
    });
    this.setSelected = function(value) {
        $('#input-tag').val(value.string);
        $('#input-tag').attr('data-value', value.val);
    };
});

第三部分是生成标记/输入的处理程序：

/********************************
/ QUICK SEARCH TAG FUNCTION
/*******************************/
$(function () {

    /*GLOBAL VARIABLES*/
    var id = null;
    var name = null;
    var length = null;
    var selected = false;
    var input = null;
    var value = null;

    /*STRINGS*/
    var caret = ' <span class="caret"></span>';
    var searchType = 'Search by <span class="caret"></span>';
    var defaultPlaceholder = 'Select a search type...';
    var criteriaWarning = '<div class="alert alert-error"><i class="remove dismiss fa fa-remove"></i><strong>Warning!</strong><small><br />Please enter your criteria.</small></div>';
    var typeWarning = '<div class="alert alert-error"><i class="remove dismiss fa fa-remove"></i><strong>Warning!</strong><small><br />Please select a search type.</small></div>';

    function searchSelect() {
        $('.dropdown-menu > li > a').on("click", function() {
            $('#search-type').html($(this).text() + caret);
            $('#input-tag').attr('placeholder', $(this).text());
            id= $(this).data('name');
            name= $(this).data('name');
            selected = true;
    });
    }searchSelect();

    function searchValue () {
        $('#input-tag').on("change", function() {
            value = $('#input-tag').data('value');
            length = $("#input-tag").val().length;
            input = $("#input-tag").val();
        });
    }searchValue();

    function createTag() {
        if((selected === true) && (length > 0)) {
            $('#tag-results').append('<div class="tag"><input id="'+id+'" type="hidden" name="'+name+'" value="'+value+'" />'+input+'<i class="remove dismiss fa fa-remove"></i></div>');
            $('#search-type').html(searchType);
            $('#input-tag').attr('placeholder', defaultPlaceholder).val('');
            $('#alert').empty();
        } else {
            if(selected === true) {
                $('#alert').append(criteriaWarning);
            } else {
                $('#alert').append(typeWarning);
            }
        }
    }

    $('#add-tag').on("click keypress", function() {
        createTag();
    });

    $('#input-tag').on("keypress", function(e) {
        var code = e.keyCode || e.which;
        if(code == 13) { // 13 = enter key-code        
                createTag();
        }
    });

});

结果是重复的值属性：

<div id="tag-results">
    <div class="tag">
        <input id="cat" type="hidden" name="cat" value="res">
        Residential &amp; Single Family Homes<i class="remove dismiss fa fa-remove"></i>
    </div>
    <div class="tag">
        <input id="lowprice" type="hidden" name="lowprice" value="res">
        10000<i class="remove dismiss fa fa-remove"></i>
    </div>
</div>

应该是：

<div id="tag-results">
    <div class="tag">
        <input id="cat" type="hidden" name="cat" value="res">
        Residential &amp; Single Family Homes<i class="remove dismiss fa fa-remove"></i>
    </div>
    <div class="tag">
        <input id="lowprice" type="hidden" name="lowprice" value="10000">
        10000<i class="remove dismiss fa fa-remove"></i>
    </div>
</div>

Answer 1

您需要更改setSelected函数

this.setSelected = function(value) 
{
        $('#input-tag').val(value.string);
        $('#input-tag').data('value', value.val);
};

这个回答：using $.data("value") versus $.attr("data-value")关于SO指定原因

 $('#input-tag').data('value', value.val);

有效，

$('#input-tag').attr('data-value', value.val);

没有按＆＃39;吨

这是更新的小提琴：http://jsfiddle.net/qb6h9739/2/

希望这有帮助！

jquery / js：更改输入值后脚本不更新属性

1 个答案: