Question

我是JavaScript和jQuery的基本用户。

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

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

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

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

我在JSON文件中具有所有项目名称和ID对，可以根据需要对其进行格式化。大约有15,000对。

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

我找不到可以借鉴的亲密例子。

Answer 1

很抱歉，如果答案太长。下面的方法使用datalist元素以及一个输入列表元素，该元素使用xhr请求填充。另外，不要忘记Safari不会执行数据列表：（...用户请注意，这还没有经过测试。

<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(); 
})();

Answer 2

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

var items = {
  "abc123" : 123456,
  "foo": 2345
}

document.getElementById("item").addEventListener("change", function () {
  var val = this.value;
  var id = items[val];
  if (!id) {
     alert("unknown product");
  }
  document.getElementById("itemID").value = id ? id : '';
})

<form method="GET">
    <input type="hidden" name="itemID" id="itemID" />
    <label for="item">Item: <label><input type="text" id="item" />
    <button>Submit</button>
</form>

以表格形式输入文本，并将成对的值附加到搜索网址-

2 个答案: