html input 预显示,tagsinput.js 预输入显示与实际值分离

我只想说一句话，tagsinput 和 typehead.js的文档太不友好了，demo也模棱两可。

基本示例

data-ajax="test.php"

class="typeahead"

type="text"

name="test"

placeholder="请输入省份"

/>

提交

使用tagsinput 中的预输入：

function tagsinputAjax(inputSelector, valueName, showName) {

var $input = $(inputSelector),

ajaxUrl = $input.attr("data-ajax");

//初始化bh

var engine = new Bloodhound({

queryTokenizer: Bloodhound.tokenizers.whitespace,

datumTokenizer: Bloodhound.tokenizers.whitespace,

remote: {

url: ajaxUrl + "?q=%QUERY",

wildcard: "%QUERY"

}

});

engine.initialize();

var typeaheadConfig = {

name: valueName,

// displayKey: valueName,

// valueKey:showName ,

templates: {

suggestion: function(data){//格式化预输入

return '

' + data[showName] + '

';

}

},

source: engine.ttAdapter()

};

//初始化

$input.tagsinput({

itemValue:valueName,

itemText:showName,

typeaheadjs: typeaheadConfig

})

}

tagsinputAjax("input", "id", "name");

注意在typeaheadConfig中的注释的地方。那个注释掉，tagsinput配置中的itemValue，itemText 才会生效，不然会提前解析，返回的只有typeaheadConfig中的displayKey！

真TMD！