Question

这是我的代码块

<div class="form-control">
    <div class="input-group">
     <span class="input-group-addon"> 
        <input type="text" id = "fromuser"></input>

    <select id="combobox">
        <option value="">Select one...</option>
        <option value="abc">abc</option>
        <option value="cde">cde</option>
        <option value="xyz">xyz</option>
      </select>
      </span>
      <button type="submit">Submit</button>
  </div>
</div>

我想要实现的是用户可以键入值或从下拉列表中选择。这里的挑战是键盘的输入与下拉列表中的输入不同。例如，下拉列表有三个字符串选项，但用户可以键入一个数字，例如10,20,30等。

是否允许这种输入？如果是这样，有人可以帮助我。

Answer 1

最近我可以解决我的问题是删除选择并使用自动完成功能。完整的测试代码如下： -

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "abc",
      "def",
      "xyz"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

function myFunction(){
    var NameValue = document.forms["FormName"]["tags"].value;
    window.alert(NameValue);
}
  </script>
</head>
<body>
<form name="FormName" method="post" />
    <div class="ui-widget" >
      <input name= "tags" id="tags" type="text" onchange="myFunction()"/>
      <button name="btn-signup" type="submit" value="Submit">Submit</button>
    </div>
 </form>

</body>
</html>

我知道这是最终解决方案，但也许还有一段路要走。

从键盘或下拉菜单中输入输入的可能性

1 个答案: