6

我正在使用typeahead v0.11.1顯示結果,但它沒有顯示以相同結果開始的結果。Bootstrap Typeahead沒有顯示具有valueKey以相同的值開頭的提示

我從數據庫中獲取的結果是這樣的:

Object { 
    Id: 4, 
    Title: "project manager", 
    Description: "project manager", 
    CompanyId: 1 
} 
Object { 
    Id: 6, 
    Title: "Software Developer", 
    Description: "Software Developer", 
    CompanyId: 1 
} 
Object { 
    Id: 7, 
    Title: ".NET Developer", 
    Description: ".NET Developer", 
    CompanyId: 1 
} 
Object { 
    Id: 10, 
    Title: "Android Developer", 
    Description: "Android Developer", 
    CompanyId: 1 
} 
Object { 
    Id: 11, 
    Title: "iOS Developer", 
    Description: "iOS Developer", 
    CompanyId: 1 
} 
Object { 
    Id: 13, 
    Title: "Sr. Android Developer", 
    Description: "Sr. Android Developer", 
    CompanyId: 1 
} 
Object { 
    Id: 14, 
    Title: "Sr. iOS Developer", 
    Description: "Sr. iOS Developer", 
    CompanyId: 1 
} 


的問題是預輸入顯示的是除了
Sr. Android DeveloperSr. iOS Developer

var position = new Bloodhound({ 
    datumTokenizer: function (datum) { 
     return Bloodhound.tokenizers.whitespace(datum.Title); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    //prefetch: '../data/films/post_1960.json', 
    remote: { 
     url: '/Search/Positions?query=%QUERY', 
     wildcard: '%QUERY', 
     filter:function (positionList) { 
      // Map the remote source JSON array to a JavaScript object array 
      return $.map(positionList, function (position) { 
       console.log("position is:", position); 
       return { 
        Title: position.Title 
       }; 
      }); 
     } 
    } 
}); 
var promisepos=position.initialize(); 
promisepos.done(function(){}); 
$('#Position').typeahead({ 
    minLength:1, 
    highlight:true, 
    hint:false 
},{ 
    name: 'positionList', 
    displayKey:'Title', 
    source:position.ttAdapter(), 
    templates:{ 
     footer: "<div class='position-wrapper'><a class='ad-ps'><i class='fa fa-user-secret'></i> Add New Position</a></div>", 
     notFound: function(){ 
      var ps=$('#Position').val(); 
      $('#PositionId').val(""); 
      return "<div class='position-wrapper'><p>No Position found.</p><a class='ad-ps'><i class='fa fa-user-secret'></i> Add New Position</a></div>"; 
     }, 
     suggestion: Handlebars.compile('<div class="position-wrapper">'+ 
             '<div class="poosition-info-wrapper">'+ 
              '<span>{{Title}}</span>'+ 
             '</div>'+ 
             '</div>') 
    } 
}); 
+0

內的filter通過我只是複製你的代碼,並做了少量修改(使用而不是從URL抓取靜態JSON )。它沒有任何問題。我可以看到「Sr. XXX」條目。我唯一的修正是使用JSON對象結構。你能檢查你是否從服務器接收到所有有效的JSON條目嗎? – CuriousMind

+0

所以,這個URL實際上是返回JSON,而我正在接收上面提到的確切的JSON條目。 –

+0

您可以添加瀏覽器開發工具的快照,顯示JSON嗎? – CuriousMind

回答

3

注意,不能確定預期的所有結果的

$("#PositionId").val(""); 
結果

? ; html不出現在問題; .typeahead()出現在

$("#Position") 

元素選擇字符串內進行初始化,無「身份證」?


的問題是預輸入由於週期字符.顯示所有的結果,除了高級 Android開發人員和Sr iPhone開發者返回obeject的Title屬性的字符串值內

出現。 .typeahead似乎與查詢的確切輸入值相匹配。例如。,;如果查詢是「sr」.typeahead將不匹配「Sr.」 ;如果查詢是「sr。」 .typeahead將匹配「高級Android開發人員」,「高級iOS開發人員」。對於將內templatesBloodhound初始化顯示,filter函數內返回匹配調整檢驗;刪除週期字符「。」從匹配測試結果返回到templates。如果查詢爲「sr」,則應返回 「高級Android開發人員」,「高級iOS開發人員」。如果查詢是「SR IOS」,應該回到「老iOS開發」到templates顯示爲suggestion

嘗試創建設置Bloodhound.tokenizers.obj.whitespace"value";在Bloodhound inititalization返回對象內filtertemplatessuggestion回調函數;返回「建議」 htmltemplatessuggestion回調函數,利用對象Bloodhound初始化

$(function() { 
 
    var search = $(".typeahead-container #Position.typeahead"); 
 
    // `positions` settings 
 
    var positions = new Bloodhound({ 
 
     // set `Bloodhound.tokenizers.obj.whitespace` to `"value"` 
 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), 
 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
     remote: { 
 
     url: "https://gist.githubusercontent.com/anonymous/" 
 
      + "cd07af7c8e3dbbeb601f/raw/" 
 
      + "936a69aa84e48c2cf96682ff044d3ace87750457/data.json" 
 
      + "?query=%QUERY", 
 
     wildcard: "%QUERY", 
 
     filter: function (pos) { 
 
      return $.map(pos, function(positions) { 
 
      // return `value` set to `positions`:`data` `Title`, 
 
      // return `suggest` property having value set to `positions` object, 
 
      // utilized at `suggestion` callback 
 
      // remove periof character "." from match test 
 
      return new RegExp(
 
        search.val() 
 
        + "|" 
 
        + search.val().replace(".", "") 
 
        , "i") 
 
        .test(positions.Title.replace(".", ""))     
 
        ? { 
 
        value: positions.Title, 
 
        suggest: positions 
 
        } 
 
        : null 
 
      }) 
 
     } 
 
     } 
 
     /* 
 
     // run with "local" data source ; e.g., `data` 
 
     local: $.map(data, function(positions) { 
 
     return { 
 
      value: positions.Tile, 
 
      suggest: positions 
 
     } 
 
     })   
 
     */ 
 
    }); 
 
    
 
    var promisepos = positions.initialize(); 
 

 
    promisepos 
 
    .done(function() { 
 
     console.log("positions initialized"); 
 
    }) 
 
    .fail(function() { 
 
     console.log("positions initialization error"); 
 
    }); 
 
    
 
    search.typeahead({ 
 
     minLength: 1, 
 
     highlight: true, 
 
     hint: false 
 
    }, { 
 
     name: "positionList", 
 
     displayKey: "Title", 
 
     templates: { 
 
     // set `templates` `footer` `html` 
 
     footer: "<div class=position-wrapper>" 
 
       + "<a class=ad-ps><i class=fa fa-user-secret></i>" 
 
       + " Add New Position</a></div>", 
 
     // set `templates` `notFound` `html` 
 
     notFound: function() { 
 
        // not certain expected result of calling `.val()` 
 
        // on `#Position` ?, without argument passed to `.val()` ? 
 
        var ps = $('#Position').val(); 
 
        // not certain expected result of setting 
 
        // `#PositionId` `.val()` to empty string ? 
 
        $("#PositionId").val(""); 
 
        return "<div class=position-wrapper>" 
 
          + "<p>No Position found.</p>" 
 
          + "<a class=ad-ps>" 
 
          + "<i class=fa fa-user-secret></i>" 
 
          + " Add New Position" 
 
          + "</a></div>"; 
 
     }, 
 
     // set `templates` `suggestion` `html` 
 
     suggestion: function(data) { 
 
         // `data`: `positions` object passed at 
 
         // `Bloodhound` `remote` `local` 
 
         var details = "<div class=resultContainer>" 
 
            + "Title: " 
 
            + "<b style=color:blue>" 
 
            + data.suggest.Title 
 
            + "</b>" 
 
            + "<div class=resultDesc>" 
 
            + "Description: <b>" 
 
            + data.suggest.Description 
 
            + "</b>" 
 
            + "</div>" 
 
            + "<div class=resultLabel>Id: " 
 
            + "<b>" 
 
            + data.suggest.Id 
 
            + "</b><br />" 
 
            + "Company Id: " 
 
            + "<b>" 
 
            + data.suggest.CompanyId 
 
            + "</b>" 
 
            + "</div></div>"; 
 
         return details 
 

 
     } 
 
     }, 
 
     source: positions.ttAdapter() 
 
    }); 
 
}); 
 
/* 
 
// run with `local` data source 
 
// `data`: `"data.json"` ; e.g., `data` at `local` 
 
var data = [ 
 
    { 
 
    "Id": 4, 
 
    "Title": "project manager", 
 
    "Description": "project manager", 
 
    "CompanyId": 1 
 
    }, 
 
    { 
 
    "Id": 6, 
 
    "Title": "Software Developer", 
 
    "Description": "Software Developer", 
 
    "CompanyId": 1 
 
    }, 
 
    { 
 
    "Id": 7, 
 
    "Title": ".NET Developer", 
 
    "Description": ".NET Developer", 
 
    "CompanyId": 1 
 
    }, 
 
    { 
 
    "Id": 10, 
 
    "Title": "Android Developer", 
 
    "Description": "Android Developer", 
 
    "CompanyId": 1 
 
    }, 
 
    { 
 
    "Id": 11, 
 
    "Title": "iOS Developer", 
 
    "Description": "iOS Developer", 
 
    "CompanyId": 1 
 
    }, 
 
    { 
 
    "Id": 13, 
 
    "Title": "Sr. Android Developer", 
 
    "Description": "Sr. Android Developer", 
 
    "CompanyId": 1 
 
    }, 
 
    { 
 
    "Id": 14, 
 
    "Title": "Sr. iOS Developer", 
 
    "Description": "Sr. iOS Developer", 
 
    "CompanyId": 1 
 
    } 
 
]; 
 
*/
.typeahead-container { 
 
    font-family: sans-serif; 
 
    position: relative; 
 
    margin: 100px; 
 
} 
 
.typeahead, 
 
.tt-query, 
 
.tt-hint { 
 
    border: 2px solid #CCCCCC; 
 
    border-radius: 8px; 
 
    font-size: 24px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    outline: medium none; 
 
    padding: 8px 12px; 
 
    width: 396px; 
 
} 
 
.typeahead { 
 
    background-color: #FFFFFF; 
 
} 
 
.typeahead:focus { 
 
    border: 2px solid #0097CF; 
 
} 
 
.tt-query { 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
 
} 
 
.tt-hint { 
 
    color: #999999; 
 
} 
 
.tt-dropdown-menu { 
 
    background-color: #FFFFFF; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-radius: 8px; 
 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
 
    margin-top: 12px; 
 
    padding: 8px 0; 
 
    width: 422px; 
 
} 
 
.tt-suggestion { 
 
    font-size: 24px; 
 
    line-height: 24px; 
 
    padding: 3px 20px; 
 
} 
 
.tt-suggestion.tt-is-under-cursor { 
 
    background-color: #0097CF; 
 
    color: #FFFFFF; 
 
} 
 
.tt-suggestion p { 
 
    margin: 0; 
 
} 
 
.resultContainer { 
 
    width: 410px; 
 
    border: 1px dotted grey; 
 
    border-radius: 10px; 
 
    padding: 4px; 
 
    margin: 4px; 
 
} 
 
.resultDesc, 
 
.resultLabel { 
 
    font-size: 14px; 
 
    font-style: italic; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"> 
 
</script> 
 
<input type="text" id="PositionId" /> 
 
<div class="typeahead-container"> 
 
    <input type="text" id="Position" class="typeahead tt-query" placeholder="positions" /> 
 
</div>

+0

謝謝@ guest271314的回答。它實際上對我有幫助。 –