在我的应用程序中,我希望根据用户在该输入框中键入的字符显示建议名称。我使用keyup事件获得用户输入,我有一个名称数组,我想从只有起始字母选择与用户输入匹配的名称。例如,如果用户键入A,建议显示名称以A开头,(对于Ro-Root Valuation)如何执行此操作?
$( document ).ready(function() {
var usernames = ["Abisi","Bentaven", "Root Valuation", "Leidos Health", "Visante", "vendor1", "yest1", "example"];
var displayname = [];
$('#input-text').keyup(function(event){
var $textValue = $(this).val();
jQuery.each( usernames,function( i, val ) {
*** find that matching name ***
if($textValue == val){
displayname.push(val);
}
});
});
答案 0 :(得分:1)
您可以尝试这样的事情:
JSFIDDLE:http://jsfiddle.net/bqkobo79/1/
var length= $textValue.length;
displayname=jQuery.grep(usernames, function( element, i ) {
if(element.toLowerCase().substr(0,length)===$textValue.toLowerCase())
return element;
});
答案 1 :(得分:0)
您必须确保输入的文字符合名称:
$textValue = $textValue.toLowerCase();
val = val.toLowerCase();
var is_matched = ($textValue.substr(0, ($textValue.length)) == val.substr(0, ($textValue.length)))
为确保您在检查确认是否属实后需要发送建议:
if (is_matched == true) {
displayname.push(val);
} else {
return false;
}
最终守则:
$( document ).ready(function() {
var usernames = ["Abisi","Bentaven", "Root Valuation", "Leidos Health", "Visante", "vendor1", "yest1", "example"];
var displayname = [];
$('#input-text').keyup(function (event) {
var $textValue = $(this).val();
jQuery.each(usernames, function (i, val) {
$textValue = $textValue.toLowerCase();
val = val.toLowerCase();
var is_matched = ($textValue.substr(0, ($textValue.length)) == val.substr(0, ($textValue.length)))
if (is_matched == true) {
displayname.push(val);
} else {
return false;
}
});
});
答案 2 :(得分:0)
String.prototype.indexOf
可以告诉您字符串是否包含另一个字符串以及该子字符串的第一个匹配项的索引。
"Abisi".indexOf("A") == 0
在您的情况下,您可以使用它来检索一组以文本输入值
开头的字符串
var usernames = ["Abisi","Bentaven", "Root Valuation", "Leidos Health", "Visante", "vendor1", "yest1", "example"];
var displayname = [];
$('#input-text').keyup(function(event){
var $textValue = $(this).val();
displayname = [];
if ($textValue.length > 0){
jQuery.each( usernames,function( i, val ) {
if(val.indexOf($textValue) === 0){
displayname.push(val);
}
});
}
console.log(displayname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="input-text"/>
&#13;