javascript - Bootstrap Typeahead 不显示 valueKey 以相同值开头的建议

Question

我正在使用 typeahead v0.11.1 来显示结果，但它没有显示以相同结果开头的结果。

我从数据库中得到的结果是这样的:

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
}

问题是 typeahead 正在显示除
Sr 之外的所有结果。 Android 开发人员 和 Sr。 iOS 开发者

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>')
    }
});

Answer 1

注意，不确定

的预期结果

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

? ; html 没有出现在问题中； .typeahead() 似乎在

初始化

$("#Position")

元素，在选择器字符串中没有“Id”？

---

The problem is typeahead is displaying all the result except Sr. Android Developer and Sr. iOS Developer

由于返回对象的 Title 属性的字符串值内的句点字符 . 出现。 .typeahead 似乎与 query 的输入值完全匹配。例如。，;如果查询是“sr”，.typeahead 将不匹配“Sr”。 ;如果查询是“sr”。 .typeahead 将匹配 "Sr. Android Developer"、 "Sr. iOS Developer"。在 Bloodhound 初始化时在 filter 函数中显示在 templates 中的返回匹配项的调整测试；删除句点字符“。”从结果返回到 templates 之前的匹配测试。如果查询是 "sr"，应该同时返回“高级 Android 开发人员”，“高级 iOS 开发人员”。如果查询是 "sr ios"，应该将 "Sr. iOS Developer"返回到 templates 以显示为 suggestion 。

尝试创 build 置 Bloodhound.tokenizers.obj.whitespace 到 "value" ；在 Bloodhound 初始化时将对象返回到 templates suggestion 回调函数中的 filter ；在 templates suggestion 回调函数中返回“suggestion” html，利用 Bloodhound< 中 filter 传递的对象 初始化

$(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>