Question

我正在尝试创建自动填充搜索框它有效，但这里有一个问题是，当用户在搜索框中输入时，它不会以第一个字母开头如果我在搜索框中键入第一个字母，它将显示包含此字母的所有单词，但我只希望它显示以此字母开头的单词。
我该怎么办？我发现这种情况发生在firefox中，但它在Chrome中没问题。

var dataList = document.getElementById("auto_json_datalist");
 // Create a new XMLHttpRequest.
var request = new XMLHttpRequest();
 // Handle state changes for the request.
request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);
      // Loop over the JSON array.
      jsonOptions.forEach(function(item) {
        // Create a new <option> element.
        var option = document.createElement("option");
        // Set the value using the item in the JSON array.
        option.value = item;
        // Add the <option> element to the <datalist>.
        dataList.appendChild(option);
      });
    } else {
      // An error occured :(
    }
  }
};
 // Set up and make the request.
request.open("GET", "autocompleteSym.json", true);
request.send();

<datalist id="auto_json_datalist"></datalist>
<input type="text"  class="enter_sym_c" list="auto_json_datalist" value="" />

Answer 1

在这里，尝试添加以下更改：

var SUCCESS_CODE = 200,
  NEEDED_REQUEST_STATE = 4,
  dataList = document.getElementById("auto_json_datalist"),
  enteredData = document.getElementsByClassName("enter_sym_c")[0],
  // the data entered by the user
  request = new XMLHttpRequest();

// Handle state changes for the request.
request.onreadystatechange = function(response) {
  if (request.readyState === NEEDED_REQUEST_STATE) {
    if (request.status === SUCCESS_CODE) {
      // Parse the JSON
      parseJSONOptions(request.responseText);
    } else {
      // An error occured :(
    }
  }
};

function parseJSONOptions(data) {
  var jsonOptions = JSON.parse(data);
  jsonOptions.forEach(function(item) {
    var itemString = new String(item["key"]); // you must know what is the key
    if (itemString.startsWith(enteredData.value)) {
      createOption(dataList, item);
    }
  });
}

function createOption(parent, value) {
  // Create a new <option> element.
  var option = document.createElement("option");
  // Set the value using the item in the JSON array.
  option.value = value;
  // Add the <option> element to the <datalist>.
  parent.appendChild(option);
}

// Set up and make the request.
request.open("GET", "autocompleteSym.json", true);
request.send();

您只需要获取已在输入中输入的字符串部分，并在获得可能的选项时 - 检查每个选项，如果它以给定的子字符串开头并将其添加到列表中，如果这是真的。< / p>

此解决方案还包括2个字符，3个字符等的情况。

Answer 2

这只需要一个非常简单的if条件，它检查输入值的第一个字母，看它是否等于当前项目的第一个字母。
如果此条件失败，则会跳过创建option元素。

此if条件如下所示：

if(inputBox.getAttribute("value").charAt(0) == item.charAt(0)) {}

if条件使用String.prototype.charAt(...);函数获取字符串的第一个字母，并提供0作为第一个（也是唯一的）参数。
如果您不知道String.prototype.charAt(...);是什么，或者您想了解更多信息，请阅读this MDN文章。

导致error item.charAt is not a function问题是因为jsonOptions.forEach内的参数（函数）接受两个参数（不是一个）。
这些参数为：index和value，index参数的类型为number 不 string。
我没有发现问题是我的错，为此我道歉。

幸运的是，解决方案非常简单，我们只需更改：

jsonOptions.forEach(function(item) {

对此：

// "i" stands for "index"
jsonOptions.forEach(function(i, item) {

我已经纠正了问题，这是编辑过的JavaScript：

// Sorry for using "document.querySelector" I was far too lazy to use anything else :)
var dataList = document.querySelector("#auto_json_datalist");
var inputBox = document.querySelector(".enter_sym_i");
// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();
// Handle state changes for the request.
request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);
      // Loop over the JSON array.
      // The function inside "forEach" accepts two arguments, "index" and "value".
      // The problem was that the "index" argument is a "integer" NOT a string.
      jsonOptions.forEach(function(index, value) {
        // !! This is the if condition that checks the first character of the input value
        if(inputBox.getAttribute("value").charAt(0) == value.charAt(0)) {
          // Create a new <option> element.
          var option = document.createElement("option");
          // Set the value using the item in the JSON array.
          option.setAttribute("value", value);
          // Add the <option> element to the <datalist>.
          dataList.appendChild(option);
        }
      });
    } else {
      // An error occured :(
    }
  }
};
// Set up and make the request.
request.open("GET", "autocompleteSym.json", true);
request.send();

注意：请记住，优良作法是使用element.getAttribute("...");和element.setAttribute("...", "...");设置和获取属性并按原样处理DOM < / em>（IE：仅处理文字文本），而不是使用属性如果您想了解更多相关信息，请查看this问题。

祝你好运，一切顺利。

我应该如何调整代码以创建以首字母开头的自动填充？

2 个答案: