我用了elasticlunr.js搜索引擎。
我编辑了他们的示例源代码
$('input').bind("enterKey", function (e) {
var value_test = $("#inputSuccess1").val();
if ($(this).val() < 2) return
var config = $('#configuration').val();
config.trim();
var json_config = null;
if (config != '') {
json_config = new elasticlunr.Configuration(config, idx.getFields()).get();
}
var query = value_test;
var results = null;
console.log(query);
if (json_config == null) {
results = idx.search(query).map(function (result) {
console.log(result);
return questions.filter(function (q) {
console.log(q);
return q.page_id === parseInt(result.ref, 10)
})[0]
})
} else {
results = idx.search(query, json_config).map(function (result) {
return questions.filter(function (q) {
return q.page_id === parseInt(result.ref, 10)
})[0]
})
}
renderQuestionList(results);
console.log(results);
});
所有存储的搜索结果都会在加载时显示，但是当我输入搜索查询时，它会返回假定的未编辑的搜索结果。尽管搜索结果数组由 2 个 items 填充(例如)，但它仍然是未定义的。我尝试将自己的结果(仅 1)放在 example_index.json 上，并尝试输入与其相关的标签。还是没有显示。
HTML 代码
<body>
<div id="wrapper">
<main class="main" role="main" style="margin-top: 30px">
<div class="container">
<div class="row">
<header style="margin-left: 15px; margin-right: 15px;">
<h1>Elasticlunr<span>.js</span></h1>
<h2>Lightweight full-text search engine in Javascript for browser search and offline search.</h2>
</header>
</div>
<div class="row">
<div class="col-md-6">
<span><strong><i>Search Configuration:</i></strong></span>
<textarea id="configuration" class="form-control" rows="6" style="font-size: 0.8em;"></textarea>
</div>
<div class="col-md-6" style="margin-left: 0px; margin-right: 0px; padding-right: 0px; padding-left: 0px;">
<span><strong><i>Configuration Example:</i></strong></span>
</div>
</div>
<div class="row" style="margin-left: 0px; margin-right: 0px; border-top-style: solid; border-top-width: 0px; padding-top: 10px;">
<div class="col-md-6" style="padding-left: 0px; padding-right: 50px">
<form>
<div class="form-group has-success">
<div class="col-xs-9" style="padding-left: 0px;">
<input type="search" class="form-control" id="inputSuccess1" >
</div>
</div>
<div><a class="all btn btn-primary btn-block" href="#">All</a></div>
</form>
</div>
<div class="col-md-12" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(7, 94, 115, 0.3); padding-left: 0px;"></div>
</div>
<div class="row" style="margin-left: 0px; margin-right: 0px;">
<div class="col-md-6" style="margin-left: 0px; margin-right: 0px;">
<div id='question-list-container' style="margin-left: 0px; margin-right: 0px;"></div>
</div>
<div class="col-md-6" style="margin-left: 0px; margin-right: 0px; padding-right: 0px; padding-left: 0px;">
<div id='question-view-container' style="margin-left: 0px; margin-right: 0px; padding-right: 0px; padding-left: 0px;"></div>
</div>
<div class="col-md-12" style="padding-bottom: 15px; border-bottom:1px solid rgba(7,94,115,0.3);"></div>
</div>
</main>
</div>
<!-- end of wrapper -->
<!-- Begin footer -->
<footer class="footer vertical-center">
<div class="container">
<p class="pull-right text-muted"><a href="#">Back to top</a>
</p>
<p class="text-muted">Copyright © Wei Song 2015.
<a href="https://github.com/weixsong">https://github.com/weixsong</a> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42352336292b2c312d2c25027374716c212d2f" rel="noreferrer noopener nofollow">[email protected]</a>. Donate by Alipay: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d6c0d5cac8cfd2cecfc6e19097928fc2cecc" rel="noreferrer noopener nofollow">[email protected]</a></p>
</div>
</footer>
<script>
(function(hijs) {
//
// hijs - JavaScript Syntax Highlighter
//
// Copyright (c) 2010 Alexis Sellier
//
// All elements which match this will be syntax highlighted.
var selector = hijs || 'pre';
var keywords = ('var function if else for while break switch case do new null in with void ' + 'continue delete return this true false throw catch typeof with instanceof').split(' '),
special = ('eval window document undefined NaN Infinity parseInt parseFloat ' + 'encodeURI decodeURI encodeURIComponent decodeURIComponent').split(' ');
// Syntax definition
// The key becomes the class name of the <span>
// around the matched block of code.
var syntax = [
['comment', /(\/\*(?:[^*\n]|\*+[^\/*])*\*+\/)/g],
['comment', /(\/\/[^\n]*)/g],
['string', /("(?:(?!")[^\\\n]|\\.)*"|'(?:(?!')[^\\\n]|\\.)*')/g],
['regexp', /(\/.+\/[mgi]*)(?!\s*\w)/g],
['class', /\b([A-Z][a-zA-Z]+)\b/g],
['number', /\b([0-9]+(?:\.[0-9]+)?)\b/g],
['keyword', new(RegExp)('\\b(' + keywords.join('|') + ')\\b', 'g')],
['special', new(RegExp)('\\b(' + special.join('|') + ')\\b', 'g')]
];
var nodes, table = {};
if (/^[a-z]+$/.test(selector)) {
nodes = document.getElementsByTagName(selector);
} else if (/^\.[\w-]+$/.test(selector)) {
nodes = document.getElementsByClassName(selector.slice(1));
} else if (document.querySelectorAll) {
nodes = document.querySelectorAll(selector);
} else {
nodes = [];
}
for (var i = 0, children; i < nodes.length; i++) {
children = nodes[i].childNodes;
for (var j = 0, str; j < children.length; j++) {
code = children[j];
if (code.length >= 0) { // It's a text node
// Don't highlight command-line snippets
if (!/^\$/.test(code.nodeValue.trim())) {
syntax.forEach(function(s) {
var k = s[0],
v = s[1];
code.nodeValue = code.nodeValue.replace(v, function(_, m) {
return '\u00ab' + encode(k) + '\u00b7' + encode(m) +
'\u00b7' + encode(k) + '\u00bb';
});
});
}
}
}
}
for (var i = 0; i < nodes.length; i++) {
nodes[i].innerHTML =
nodes[i].innerHTML.replace(/\u00ab(.+?)\u00b7(.+?)\u00b7\1\u00bb/g, function(_, name, value) {
value = value.replace(/\u00ab[^\u00b7]+\u00b7/g, '').replace(/\u00b7[^\u00bb]+\u00bb/g, '');
return '<span class="' + decode(name) + '">' + escape(decode(value)) + '</span>';
});
}
function escape(str) {
return str.replace(/</g, '<').replace(/>/g, '>');
}
// Encode ASCII characters to, and from Braille
function encode(str, encoded) {
table[encoded = str.split('').map(function(s) {
if (s.charCodeAt(0) > 127) {
return s
}
return String.fromCharCode(s.charCodeAt(0) + 0x2800);
}).join('')] = str;
return encoded;
}
function decode(str) {
if (str in table) {
return table[str];
} else {
return str.trim().split('').map(function(s) {
if (s.charCodeAt(0) - 0x2800 > 127) {
return s
}
return String.fromCharCode(s.charCodeAt(0) - 0x2800);
}).join('');
}
}
})(window.hijs);
</script>
第三次编辑:
我有这个代码
$('input').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
我使用 xampp，当我按 Enter 键时，就会发生这种情况。这些“空列表”来自之前的 .json 文件，但具有不同的 id 。我找不到那部分
它有很多代码，所以我将其上传到这里(编辑:删除链接。现已修复)
最佳答案
input 标记位于 form 标记之间。这意味着按下 Enter 键后，表单将被提交，因此页面将重新加载，从而删除您放置的任何信息并显示纯粹的结果。
在开发者提供的示例中，使用了$('input').bind('keyup', debounce(function () {)。因此，在输入文本时会搜索标签。但是，在您的情况下，控件甚至不会转移到您打算运行的代码。
请检查这个 https://jsfiddle.net/kaminasw/rqj68xt5/在输入中按 Enter 时应显示警报。
$('input').bind("enterKey",function(e){
alert();
});
尝试使用带有 keyup 事件的实际代码，并将按下的键与 EnterKey 代码进行比较，即 13。
$('input').keyup(function(e) {
// 13 is ENTER
if (e.which === 13)
// Perform action
});
关于javascript - elasticlunr.js 不显示搜索查询结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42220460/