因此，我此时正在按照https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/的udemy课程进行操作，我应该制作一个实时搜索栏，但最终我遇到了错误，根本没有意义
那么首先我的错误：
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\mathi\Local Sites\test-site-2\app\public\wp-content\themes\Test_site2\js\modules\Search.js: Unexpected token (59:12)
[0m [90m 57 | [39m[32m ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')} [39m[0m
[0m [90m 58 | [39m[32m ${combineResults.lenght ? '</ul>' : ''}`[39m)[33m;[39m[0m
[0m[31m[1m>[22m[39m[90m 59 | [39m [33m<[39m[33m/[39m[33mdiv[39m[33m>[39m[0m
[0m [90m | [39m [31m[1m^[22m[39m[0m
[0m [90m 60 | [39m[0m
[0m [90m 61 | [39m [33m<[39m[33mdiv[39m [36mclass[39m[33m=[39m[32m"one-third"[39m[33m>[39m[0m
[0m [90m 62 | [39m [33m<[39m[33mh2[39m [36mclass[39m[33m=[39m[32m"search-overlay__section-title"[39m[33m>[39m[33mPrograms[39m[33m<[39m[33m/[39m[33mh2[39m[33m>[39m[0m
at Parser.raise (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:6344:17)
at Parser.unexpected (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:7659:16)
at Parser.parseExprAtom (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8828:20)
at Parser.parseExprSubscripts (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8413:23)
at Parser.parseMaybeUnary (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8393:21)
at Parser.parseExprOps (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8280:23)
at Parser.parseMaybeConditional (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8253:23)
at Parser.parseMaybeAssign (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8200:21)
at Parser.parseExpression (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8148:23)
at Parser.parseStatementContent (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:9917:23)
at eval (webpack:///./app/public/wp-content/themes/Test_site2/js/modules/Search.js?:1:7)
at Object../app/public/wp-content/themes/Test_site2/js/modules/Search.js (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:132:1)
at __webpack_require__ (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:20:30)
at eval (webpack:///./app/public/wp-content/themes/Test_site2/js/scripts.js?:9:73)
at Module../app/public/wp-content/themes/Test_site2/js/scripts.js (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:144:1)
at __webpack_require__ (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:20:30)
at http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:84:18
at http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:87:10
这是我的代码：（问题始于“ getResults（）”
import $ from 'jquery';
class Search {
// 1. describe and create/initiate our object
constructor() {
this.addSearchHTML();
this.resultsDiv = $("#search-overlay__results");
this.openButton = $(".js-search-trigger");
this.closeButton = $(".search-overlay__close");
this.searchOverlay = $(".search-overlay");
this.searchField = $("#search-term");
this.events();
this.isOpenOverlayOpen = false;
this.isSpinnerVisible = false;
this.previousValue;
this.typingTimer;
}
// 2. events
events() {
this.openButton.on("click", this.openOverlay.bind(this));
this.closeButton.on("click", this.closeOverlay.bind(this));
$(document).on("keydown", this.keyPressDispatcher.bind(this));
this.searchField.on("keyup", this.typingLogic.bind(this))
}
// 3. methods (function, action...)
typingLogic(){
if(this.searchField.val() != this.previousValue){
clearTimeout(this.typingTimer);
if(this.searchField.val()){
if(!this.isSpinnerVisible){
this.resultsDiv.html('<div class="spinner-loader"></div>');
this.isSpinnerVisible = true;
}
this.typingTimer = setTimeout(this.getResults.bind(this), 750);
} else{
this.resultsDiv.html('');
this.isSpinnerVisible = false;
}
}
this.previousValue = this.searchField.val()
}
getResults() {
$.getJSON(testData.root_url + '/wp-json/test/v1/search?term=' + this.searchField.val(), (results) =>{
this.resultsDiv.html(`
<div class="row">
<div class="one-third">
<h2 class="search-overlay__section-title">General Information</h2>
${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
${combineResults.lenght ? '</ul>' : ''}`);
</div>
<div class="one-third">
<h2 class="search-overlay__section-title">Programs</h2>
${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
${combineResults.lenght ? '</ul>' : ''}`);
<h2 class="search-overlay__section-title">Professors</h2>
${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
${combineResults.lenght ? '</ul>' : ''}`);
</div>
<div class="one-third">
<h2 class="search-overlay__section-title">Campuses</h2>
<h2 class="search-overlay__section-title">Events</h2>
</div>
keyPressDispatcher(e){
if(e.keyCode == 83 && !this.isOpenOverlayOpen && !$("input, textarea").is(':focus')){
this.openOverlay();
}
if(e.keyCode == 27 && this.isOpenOverlayOpen){
this.closeOverlay();
}
}
openOverlay(){
this.searchOverlay.addClass("search-overlay--active");
$("body").addClass("body-no-scroll");
this.searchField.val('');
setTimeout(()=> this.searchField.focus(), 301);
this.isOpenOverlayOpen = true;
}
closeOverlay(){
this.searchOverlay.removeClass("search-overlay--active");
$("body").removeClass("body-no-scroll");
this.isOpenOverlayOpen = false;
}
addSearchHTML(){$("body").append(`
<div class="search-overlay ">
<div class="search-overlay__top">
<div class="container">
<i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
<input type="text" class="search-term" placeholder="What are you looking for?"
id="search-term">
<i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
</div>
</div>
<div class="container">
<div id="search-overlay__results"></div>
</div>
</div>
`);
export default Search;
答案 0 :(得分：0)
第58-65和69行_拼写错误的“长度”
${combineResults.lenght ? '</ul>' : ''}`);
也_似乎整个字符串应该在第58行之后的一行终止
如此
${combineResults.lenght ? '</ul>' : ''}`);
</div>
应阅读
${combineResults.length ? '</ul>' : ''}
</div>`);
答案 1 :(得分：-2)
combinedResults应该是结果，如果您像课程result.generalInfo.length这样创建自定义的rest-api，并用不同的帖子类型程序，教授，校园，活动替换一般信息