如何隐藏 html 输入列表中的某些字符？

Question

我有一个 html 输入列表，以及一个关联的数据列表，定义如下：

<input list="mylist" id="my-input" name="friend-name" 
   placeholder="Begin typing friend's name here..." 
   required class="form-control">

列表本身（和关联的数据列表）工作正常。但是，我的每个条目都是以下形式："String [numeric_id]"

我想知道是否有任何方法可以隐藏提交表单之前的 [numeric_id] 部分。
我查看了 pattern 属性，但这似乎限制了输入中允许的实际数据，这不是我想要的 - 我只是想要隐藏方括号 [] 之间的部分，但仍然已提交表格。
也可以将其移动到 type=hidden 的另一个输入。有什么办法可以做到吗？

@isherwood，这是我的表单标签：

<form action="/chat_forwarding/modal_edit_msg.php" id="fwd-form" method="POST" class="form-inline" style="display: block;">

Answer 1

如果您没有使用任何支持绑定的框架，您应该监听输入事件并根据它更新隐藏的输入。

这个函数可能会给你思路：

let realInput = document.getElementById('real-input');
let userInput = document.getElementById('user-input');
userInput.addEventListener('input', function(value) {
  const inputValue = value.target.value;
  realInput.value = inputValue; // update the hidden input
  const userInputResult = inputValue.match(/\[[^\[]*\]/); // the regex for [numberic_id]
  if (userInputResult) {
    userInput.value = inputValue.substring(0, [userInputResult.index - 1]); // -1 is to remove the space between the 'string' and the '[numeric_id]'
  }
});

Answer 2

我应该提到我的输入也使用 Awesomplete（和 jQuery）。出于这个原因，绑定像 keyup 这样的普通事件不起作用（只要用户键入一个键，该事件就会触发）。我能够通过 awesomplete-selectcomplete 事件实现我想要的功能，如下所示（这将添加一个隐藏的输入元素，其 id 值来自 "String [id]" 形式的字符串）：

  $("#my-input").on('awesomplete-selectcomplete',function(){
        var fullStr = this.value;
        //alert(fullStr);
        var regex = /\[[0-9]+\]/g;
        var match = regex.exec(fullStr);
        //alert(match[0]);
        if (match != null) // match found for [id]
        {
                var fullName = fullStr.substr(0,fullStr.lastIndexOf("[")-1);
                var x = match[0];
                var id = x.substr(1, x.lastIndexOf("]")-1);
                //alert(id);
                $('#fwd-form').prepend('<input type="hidden" name="h_uid" value="' + id + '">');
                $('#my-input').val(fullName);


        }
    });

如何隐藏 html 输入列表中的某些字符？

How to hide certain characters within an html input list?

javascript

css

html

input

datalist