ElasticsearchCRUD使用(十八)【进行MVC搜索Elasticsearch高亮】

本文介绍如何在MVC应用程序中使用Elasticsearch高亮显示搜索结果。该应用程序执行一个简单的Elasticsearch模糊查询，高亮显示的结果显示在Razor 视图中。

在使用高亮显示请求的搜索可以发送到Elasticsearch之前，需要创建一个索引。 FastestAnimal类用于此。

public class FastestAnimal
{
    public long Id { get; set; }
    public string AnimalName { get; set; }
    public string Speed { get; set; }
    public string SpeedMph { get; set; }
    public string SpeedKmh { get; set; }
    public string Data { get; set; }
}

CreateIndexWithDataIfItDoesNotExist被添加到全局应用程序Startup方法。 每次在IIS中启动Web应用程序时都会调用此操作。 该方法检查索引是否不存在。

var searchProvider = new SearchProvider();
searchProvider.CreateIndexWithDataIfItDoesNotExist();

如果没有索引存在，则使用IndexCreate方法创建新的索引。 这将按默认值创建一个fastestanimals索引和一个fastestanimal类型。 如果需要，可以更改。 然后创建一些数据，并使用文档填充索引。

_context.IndexCreate<FastestAnimal>();

//创建animals列表并添加一些项目...
foreach (var animal in animals)
{
    _context.AddUpdateDocument(animal, animal.Id);
}

_context.SaveChanges();

搜索方法使用模糊查询来搜索数据。使用数据字段搜索该term。 高亮显示属性配置为使用自定义的前置和后贴标签在数据字段上高亮显示。mycolor类用于风格高亮。 该方法只返回高亮显示的结果。 这可以改变以返回命中结果以及Id，以便可以创建搜索链接。

public IEnumerable<string> Search(string searchTerm)
{
    var search = new Search
    {
        Query = new Query(new FuzzyQuery("data", searchTerm)),
        Highlight = new Highlight(
            new List<HighlightField>
            {
                new HighlightField("data")
                {
                    PreTags= new List<string>{"<b class=\"mycolor\">"}, 
                    PostTags = new List<string>{"</b>"}
                }
            })
    };

    var hits = _context.Search<FastestAnimal>(search, new SearchUrlParameters { Pretty = true });

    return hits.PayloadResult.Hits.HitsResult.Select(t => t.Highlights["data"].FirstOrDefault());
}

MVC控制器实现从视图调用的action方法。此方法调用搜索服务提供者，并返回列表作为JSON数组。

public JsonResult Search(string term)
{
    var searchResults = new SearchResults { Results = _searchProvider.Search(term).ToList() };
    return Json(searchResults.Results, "highlights", JsonRequestBehavior.AllowGet);
}

该视图使用jQuery向MVC控制器发送ajax表单请求

<h3>Add your text and click enter for the fuzzy search in Elasticsearch with highlighting</h3>
<div class="row"> 
    <form id="termsearch" action="/home/search" method="post">
        <input id="termInput" name="termInput" type="text" style="width:500px" />
    </form>
</div>

<br/>

<div id="results">
    No results  
</div>

@section scripts
{

<script type="text/javascript">
    var frm = $('#termsearch');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: 'term=' + $("#termInput").val(),
            success: function (data) {

                var divItem = $("#results");
                divItem.empty();
                var arr = $.parseJSON(data);

                for (i = 0; i < arr.length; i++) {
                    $('<div/>', {
                        'html': arr[i] + '<br/><hr>'
                    }).appendTo(divItem);
                }
            }
        });

        ev.preventDefault();
    });
</script>
}

请求将发送到Elasticsearch如下：

POST http://localhost:9200/fastestanimals/fastestanimal/_search?&pretty=true HTTP/1.1
Content-Type: application/json
Host: localhost:9200
Content-Length: 136
Expect: 100-continue

{
    "query": {
        "fuzzy": {
            "data": {
                "value": "mph" }
        }
    },
    "highlight": {
        "fields": {
            "data": {
                "pre_tags": ["<b class=\"mycolor\">"],
                "post_tags": ["</b>"] }
        }
    }
}

然后显示所需的高亮显示结果。