jQuery：根据输入的第一个字母显示数组元素答案

【问题标题】：jQuery: Show array element based on first letter of inputjQuery：根据输入的第一个字母显示数组元素
【发布时间】：2018-02-23 07:45:19
【问题描述】：

我对 javascript 还是很陌生，我有一个数组，其中每个字母都有一个元素：

var firstname = [ "Julie", "Jack", "John", ....]

我想根据表单输入字段中使用的第一个字母将特定元素填充到标签中。

例如，如果 A 是输入中使用的第一个字母，它将填充“Julie”，B 将填充“Jack”，C 将填充“John”等等......

谁能告诉我如何在 jQuery 中做到这一点？谢谢。

【问题讨论】：

为什么不使用数字？因为如果你只使用字母，你就有 26 个案例。那么您想要的是人们在输入字段中输入一些内容，然后您显示正确的内容？

标签： javascript jquery arrays forms

【解决方案1】：

这是你要找的吗？

var firstname = [ "Julie", "Jack", "John"];

function getElementBasedOnFirstChar(input) {
    var charCode = input.charCodeAt(0);
    
    // Uppercase
    if (charCode >= 65 && charCode <= 90) {
        return firstname[charCode - 65];
    } 
    // Lowercase
    else if (charCode >= 97 && charCode <= 122) {
        return firstname[charCode - 97];
    }
    // Non alphabetic characters
    else {
        throw "Illegal start of string";
    }
}

console.log(getElementBasedOnFirstChar("Alfa"));
console.log(getElementBasedOnFirstChar("alfa"));
console.log(getElementBasedOnFirstChar("Bravo"));
console.log(getElementBasedOnFirstChar("Charlie"));
console.log(getElementBasedOnFirstChar("---"));

【讨论】：

【解决方案2】：

我不确定您在寻找什么。但是此代码从输入字段中获取值并检查数组中以输入开头的项目。我只是将它附加到一个 div 作为示例。

var firstname = [ "Julie", "Jack", "John", "Peter", "Frank"];

$('#ugh').on('keyup',function(){
//Check if key is a character (a-z | A-Z)
if (event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode >= 97 && event.keyCode <= 122){
  $.each(firstname, function(key, val){ //foreach item in firstname array
   if(val.toLowerCase().match("^" + $('#ugh').val().toLowerCase())){ //text input matches item from array 
    $('#result').append('<p>'+val+'</p>'); //display result, change to whatever you want to do with it
   }
  });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='ugh'/>

<div id="result"></div>

【讨论】：

这与我所追求的很接近，但我希望 A 返回“Julie”，B 返回“Jack”，C 返回“John”。与 J 返回“Julie”、F 返回“Frank”等相反。

【解决方案3】：

你期待这样的事情吗

$(document).ready(function() {
  var arr = [];
  var firstname = [ "Julie", "Jack", "John"];
  var i = "a";
  $.each(firstname, function(key, value) {
  //  console.log(key, value);
  arr[i] = value;
  var ii =   String.fromCharCode(i.charCodeAt() + 1);
  console.log(ii);
  i = ii;
  console.log(arr);
  });
  alert(arr['a']);
 // console.log(firstname);
});

https://jsfiddle.net/o2gxgz9r/14064/

【讨论】：