[英]autocomplete.js autoCompleteJS is not defined
(autocomplete.js 页面说要标记“autocomplete.js”,但该标记不存在)
所以我正在尝试设置 autocomplete.js 以用于我的项目(Laravel 和 AlpineJS)。 从他们的网站复制示例开始。
搜索工作正常,但是,“未找到结果”正在触发错误。
Uncaught (in promise) ReferenceError: autoCompleteJS is not defined
这是我的代码:
<div>
<input type="text" id="autoComplete" tabindex="1" class="border shadow rounded"/>
</div>
@section('script')
<script type="text/javascript">
new autoComplete({
data: { // Data src [Array, Function, Async] | (REQUIRED)
src: [
{title: 'some-item',name:'First Some Item'},
{title: 'something-else',name:'Something else for 2'},
{title: 'another-thing',name:'Another Thing'}
],
key: ["title", "name"],
cache: false
},
sort: (a, b) => { // Sort rendered results ascendingly | (Optional)
if (a.match < b.match) return -1;
if (a.match > b.match) return 1;
return 0;
},
placeHolder: "Items...", // Place Holder text | (Optional)
selector: "#autoComplete", // Input field selector | (Optional)
observer: true, // Input field observer | (Optional)
debounce: 300, // Post duration for engine to start | (Optional)
searchEngine: "strict", // Search Engine type/mode | (Optional)
resultsList: { // Rendered results list object | (Optional)
container: source => {
source.setAttribute("id", "permissions");
},
destination: "#autoComplete",
position: "afterend",
element: "ul"
},
maxResults: 5, // Max. number of rendered results | (Optional)
highlight: true, // Highlight matching results | (Optional)
resultItem: { // Rendered result item | (Optional)
content: (data, source) => {
source.innerHTML = data.match;
},
element: "li"
},
noResults: (dataFeedback, generateList) => {
// Generate autoComplete List
generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
// No Results List Item
const result = document.createElement("li");
result.setAttribute("class", "no_result");
result.setAttribute("tabindex", "1");
result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;
document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
},
onSelection: feedback => { // Action script onSelection event | (Optional)
console.log(feedback.selection.value);
}
});
</script>
@endsection
没有结果时触发的错误在此部分:
noResults: (dataFeedback, generateList) => {
// Generate autoComplete List
generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
// No Results List Item
const result = document.createElement("li");
result.setAttribute("class", "no_result");
result.setAttribute("tabindex", "1");
result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;
document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
},
尤其是:
generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
和
document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
问题似乎是在autoCompleteJS
中找不到 autoCompleteJS。
我的强项是更多的后端/php,所以我对 javascript 承诺和所有这些不是很熟悉,而且我找不到任何其他有类似问题的帖子。 这可能是我忽略的一些简单的事情:/
所以问题很简单...
第一个是他们的示例代码在new autoComplete
段前面缺少一个const autoCompleteJS =
...
第二个是由于某种原因, autoCompleteJS.resultsList.idName
,虽然正确,但该元素在 class 中应用名称而不是作为 ID,所以我不得不将#
更改为 a .
...现在似乎或多或少正在工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.