我只想說一句話，tagsinput 和 typehead.js的文件太不友好了，demo也模稜兩可。

   <div class="example">
      <h2>基本示例</h2>
      <form action="#" method="get">
        <input
          data-ajax="test.php"
          class="typeahead"
          type="text"
          name="test"
          placeholder="請輸入省份"
        />
        <button type="submit">提交</button>
      </form>
    </div>
 

使用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 '<div data-id="'+ data[valueName] +'">'  + data[showName] + '</div>';
                 }
                 },
                source: engine.ttAdapter()
              };
              
         
              //初始化
           $input.tagsinput({
                itemValue:valueName,
                itemText:showName,
                typeaheadjs: typeaheadConfig
              })
            
      }
    
            tagsinputAjax("input", "id", "name");
 

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

真TMD！