0
点赞
收藏
分享

微信扫一扫

Elastic Search——跨域访问 一个简单的search demo,match_phase, match_all, 自定义高亮关键字


首先用everything 或者 直接找 

Elastic Search——跨域访问  一个简单的search demo,match_phase, match_all,  自定义高亮关键字_Elastic

bootstrap.memory_lock: false
cluster.name: elasticsearch
http.port: 9200
node.data: true
node.ingest: true
node.master: true
node.max_local_storage_nodes: 1
node.name: DESKTOP-OCE6CPP
path.data: G:\Elastic\Elasticsearch\data
path.logs: G:\Elastic\Elasticsearch\logs
transport.tcp.port: 9300
xpack.license.self_generated.type: basic
xpack.security.enabled: false
network.host: 0.0.0.0
discovery.seed_hosts: ["0.0.0.0", "[::1]"]
#开启跨域访问支持,默认为false

http.cors.enabled: true

#跨域访问允许的域名地址,(允许所有域名)以上使用正则

http.cors.allow-origin: /.*/

search demo 是AWS的,直接把代码拷贝到这

 

Html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" href="css/main.css">
<title>Search Example</title>
</head>
<body>
<h1>Movie Search</h1>
<input id="search" autocomplete="off" placeholder="Search">
<div id="results"></div>
<p id="noresults">No results. Try another search term.</p>
<p id="loading">Getting results...</p>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="scripts/search.js"></script>
</body>
</html>

 

script/Search.js

// Update this variable to point to your domain.
var apigatewayendpoint = 'http://192.168.1.245:9200/job_name/_search';
var loadingdiv = $('#loading');
var noresults = $('#noresults');
var resultdiv = $('#results');
var searchbox = $('input#search');
var timer = 0;

// Executes the search function 250 milliseconds after user stops typing
searchbox.keyup(function () {
clearTimeout(timer);
timer = setTimeout(search, 250);
});

async function search() {
// Clear results before searching
noresults.hide();
resultdiv.empty();
loadingdiv.show();
// Get the query from the user
let query = searchbox.val();
// Only run a query if the string contains at least three characters
if (query.length > 2) {
// Make the HTTP request with the query as a parameter and wait for the JSON results
let response = await $.get(apigatewayendpoint, { q: query, size: 25 }, 'json');
// Get the part of the JSON response that we care about
let results = response['hits']['hits'];
if (results.length > 0) {
loadingdiv.hide();
// Iterate through the results and write them to HTML
resultdiv.append('<p>Found ' + results.length + ' results.</p>');
for (var item in results) {
console.log(results[item]);
resultdiv.append('<div class="result">' +
'<div><h2> "' + results[item] + '"</h2> </div></div>');
}
} else {
noresults.show();
}
}
loadingdiv.hide();
}

// Tiny function to catch images that fail to load and replace them
function imageError(image) {
image.src = 'images/no-image.png';
}

 

这其实就是URL 搜索:​​https://www.elastic.co/guide/en/elasticsearch/reference/7.1/search-uri-request.html​​

 

如果想加 match_phase  match_all 这类的

代码如下

var data = { "_source": false,  "query" : { "match_phrase": {
"content" : "my text"
}
},

"highlight": {
"fields" : {
"content" : {}
}
}
};
$.ajax({
type: "POST",
url: "http://192.168.1.245:9200/job_name/_search",
data: JSON.stringify(data),
contentType : "application/json",
success: function (data) {
console.log(`成功`)
console.log(data)
},
error: function(res) {
console.log(res)
},
complete: function(res) {
console.log(`complete${res}`)
}
});

 

自定义高亮关键字就是修改

Elastic Search——跨域访问  一个简单的search demo,match_phase, match_all,  自定义高亮关键字_ide_02

var data = {
"query" : {
"match_phrase": {
"content" : `${query}`
}
},

"highlight": {
"pre_tags" : ["<b class=\"c_color\">"],
"post_tags" : ["</b>"],
"fields" : {
"content" : {}
}
}
};

class都添加上了,样式自己写就OK了

举报

相关推荐

0 条评论