Javascript 在表单中输入文本，并将配对值附加到搜索URL-

我是JavaScript和jQuery的初级用户

我有一个表单，它基于用户输入构建一个简单的搜索URL，并使用GET方法将用户发送到另一个域的站点上的一组过滤搜索结果。有一个基本URL，表单输入被附加到该URL，如中所示

http://www.othersite.com/search.asp?q=input1&id=input2

我的问题是，另一个站点在搜索URL中使用的项目ID与项目名称不同。用户将知道项目名称，但项目ID只是一个顺序键值

我想让用户输入项目名称以及一些其他输入术语，并在提交URL时将相应的键值附加到URL

我有一个JSON文件中的所有项目名称和ID对，可以根据需要进行格式化。大约有15000对

例如，名为abc123的项的ID为54321。 我希望用户在文本字段中输入abc123，并将itemID=54321附加到基本搜索URL

---

我找不到任何可以借鉴的实例。

因此，从对象中查找id并设置一个隐藏字段

可变项目={ abc123:123456， foo:2345 } document.getElementByIditem.addEventListenerchange，函数{ var val=该值； var id=项目[val]； 如果！id{ 警告未知产品； } document.getElementByIditemID.value=id？id:； } 项目： 提交

---

抱歉，如果这是一个太长的答案。下面的方法使用datalist元素和输入列表元素，输入列表元素由xhr请求填充。另外，别忘了Safari不做数据列表：。。。用户注意，这还没有经过测试

---

因此，在对象中查找密钥并生成url。如果是表单提交，请设置隐藏字段。欢迎使用。请花点时间看一看。如果您不提供任何代码，我们将无法帮助您-请参阅如何创建。这使我走上了正确的道路。我是否可以将数据存储在本地文件中，而不是将所有15000对放在页面上的脚本标记中？此外，如果要为服务器脚本将隐藏项值设置为项目url，我忘记设置一个隐藏的输入表单项，如@epascarello的示例中所示。

<form id='search-form' method='GET'>
    <input list='search-data' 
      name='item-title'
      id='search-input' 
      value='' 
      placeholder='Search Titles'>
    <datalist id='search-data'>
    </datalist>
    <input type='submit' name='submit-search' />
</form>

// Encapsulate a function
// Load JSON using XHR and than append
// an options node element to the list input.
(function searchFormScoped(){
var _form = document.getElementById("search-form"),
    _listNode = document.getElementById("search-data");
var xhr = new XMLHttpRequest();
  xhr.open("GET", "/the_request_url.json");
  xhr.responseType = "json";
  xhr.onload = function loadHtmlFormList(e) {
    var _data = this.response,
        _datakeys = Object.keys(_data);
    // loop through key id's and populate the option with 
      // the correct values and data attributes
    for(var c=0; c < _datakeys.length; c++) {
    var _opt = document.createElement("options");
        // store the key values from the json as the options value 
        _opt.value = _data[_datakeys[c]];
        // I use the data-id attribute to store key values of the json
        _opt.setAttribute('data-id', _datakeys[c]);
    }

    // Set an event to be executed when the list value changes
    _listNode.addEventListener("change", function searchOptionChanged(e) {
      var _infoNode = _listNode.querySelector('option[value="' + e.target.value + '"]');
      // Set the data-item attribute of the target event element of the 
        // string you need for your search string url to use for when the form is
        // submitted, or from here you could set the action attribute, I believe.
      e.target.setAttribute('data-item', 'itemID=' +_infoNode.getAttribute('data-id'));
    });

  }
  xhr.send(); 
})();