Jquery 使用<；选项>；标记如何让用户键入内容，但向服务器发送其他内容

我有这样一个数据列表：

<datalist id="staff">
    <option value="1">Bilbo</option>
    <option value="2">Picard</option>
</datalist>

比尔博
皮卡德

还有这样一种形式：

<label>Person<input name="staff" type="text" list="staff" placeholder="Anne Example"></label>

人

我将基础框架与JQuery一起使用

我需要一种方法，让用户可以开始键入“Picard”，它将自动完成Picard为他们，但当表单实际提交-它将提交值2。

---

此外，该字段应被锁定，因此您必须从列表中选择某些内容，以便它不能是“比利”，而只能是“比尔博”或“皮卡尔”。数据列表可用于自动完成，但不能用于验证。 因此，我建议您使用jqueryui自动完成输入和验证

html

 <form onsubmit="return submitForm();">
    <input id="tags"required="">
    <button onclick="submitForm();">Submit</button>
 </form>

这是

    var hint = [
      "Bilbo",
      "Picard",
    ];

  $(function() {
    $( "#tags" ).autocomplete({
      source: hint
    });
  });

  function submitForm()
  {
    if($.inArray( $('#tags').val() , hint )==-1)
   {
     //Some Error
    return false;
    }

  else if($('#tags').val()!="")
  {
    $('#tags').val($.inArray( $('#tags').val() , hint )+1); 
    return true;
  }
  }