【发布时间】：2020-03-14 23:15:21
【问题描述】：
所以，我需要您的帮助/协助来完成这些任务。
我使用箭头创建了一个搜索功能。经过测试，我注意到它不能单独在 IE 11 中运行。它虽然适用于其他浏览器。后来我意识到箭头函数在 IE 11 上不起作用。 所有让它发挥作用的努力都被证明是徒劳的。
请在下面找到箭头函数和我从箭头函数及其对应的JS创建的JS函数
箭头函数
<script>
var search = document.getElementById('searchTerm_de');
var search2 = document.getElementById('searchTerm_en');
var matchList = document.getElementById('result');
var searchStates = async searchText => {
var res = await fetch('../data/info.json');
var states = await res.json();
let matches = states.filter(state => {
var regex = new RegExp(`^${searchText}`,'gi');
return state.name.match(regex);
});
if(searchText.length === 0){
matches = [];
matchList.innerHTML = '';
}
outputHtml(matches);
};
var outputHtml = matches => {
if(matches.length > 0){
var html = matches.map(match =>
`<div class="card result-list de en">
<h6><span class="my-result"><a href="${match.url}" target="_blank">${match.name}</a> </h6></span>
</div>
`).join('');
matchList.innerHTML = html;
}
};
search.addEventListener('input', () => searchStates(search.value));
search2.addEventListener('input', () => searchStates(search2.value));
</script>
普通的 JS 函数（我从箭头函数创建的）
<script>
var search = document.getElementById('searchTerm_de');
var search2 = document.getElementById('searchTerm_en');
var matchList = document.getElementById('result');
var searchStates = async function searchStates (searchText) {
var res = await fetch('../data/info.json');
var states = await res.json();
var matches = states.filter(function (state) {
var regex = new RegExp("^".concat(searchText), "gi");
return state.name.match(regex);
});
if (searchText.length === 0) {
matches = [];
matchList.innerHTML = '';
};
outputHtml(matches);
};
var outputHtml = function (matches) {
if (matches.length > 0) {
var html = matches.map(function (match) {
return "<div class=\"card result-list de en\">\n\t\t<h6><span class=\"my-result\"><a href=\"".concat(match.url, "\" target=\"_blank\">").concat(match.name, "</a> </h6></span>\n\t</div>\n\t");
}).join('');
matchList.innerHTML = html;
}
};
search.addEventListener('input', function () {
return searchStates(search.value);
});
search2.addEventListener('input', function () {
return searchStates(search2.value);
});
</script>
JSON 文件
[
{
"name":"Running ",
"url": "url": "http://google.com"
},
{
"name":"Javascript",
"url": "url": "http://google.com"
},
{
"name":"On old browser",
"url": "url": "http://google.com"
},
{
"name":"without arrow",
"url": "url": "http://google.com"
},
{
"name":"functions and works well",
"url": "http://google.com"
},
{
"name":"Please, help me",
"url": "url": "http://google.com"
},
{
"name":"I gladyl appreciate your response",
"url": "url": "http://google.com"
},
]
我已更改箭头功能，但我注意到 IE 11 不支持 Await/Async。有没有人可以使此代码在 IE.11 上运行。所有帮助和帮助将不胜感激
谢谢
编辑
我已经可以使用 Babel 转译器了：https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator/
这是我的 HTML
<div class="search">
<input type="text" class="searchTerm de" id="searchTerm_de" placeholder="Was suchst du ?" onfocus="this.placeholder=''" onblur="this.placeholder='Was suchst du ?'">
<input type="text" class="searchTerm en" id="searchTerm_en" placeholder="What are you looking for ?" onfocus="this.placeholder=''" onblur="this.placeholder='What are you looking for ?'">
</div>
<ul class="list-group-search" id="result"></ul>
<br/>
</div> ```
**and this is the transpiled/compiled ES5 for IE 11**
<script>
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error);
return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args
); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var search = document.getElementById('searchTerm_de');
var search2 = document.getElementById('searchTerm_en');
var matchList = document.getElementById('result');
var searchStates = function () {
var _ref = _asyncToGenerator(function* (searchText) {
var res = yield fetch('./data/info.json');
var states = yield res.json();
let matches = states.filter(function(state) {
var regex = new RegExp(`^${searchText}`, 'gi');
return state.name.match(regex);
});
if (searchText.length === 0) {
matches = [];
matchList.innerHTML = '';
}
outputHtml(matches);
});
return function searchStates(_x) {
return _ref.apply(this, arguments);
};
}();
var outputHtml =function(matches) {
if (matches.length > 0) {
var html = matches.map(match => `<div class="card result-list de en">
<h6><span class="my-result"><a href="${match.url}" target="_blank">${match.name}</a> </h6></span>
</div>
`).join('');
matchList.innerHTML = html;
}
};
search.addEventListener('input', () => searchStates(search.value));
search2.addEventListener('input', () => searchStates(search2.value));
</script>
While the JSON file still remains the same.
It's still working on all browsers except IE 11.
Its gettings tiring but I'm not determined to give up
Anyone else knows what could be done at this point to make the code run on IE 11
Thanks
【问题讨论】：
标签： javascript json async-await