beeblog/views/search.html

{{template "header" .}}
<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
<title>搜索 - 码农随笔</title>
<script src="https://unpkg.com/dayjs@1.8.15/dayjs.min.js"></script>
</head>
<body>
<div class="root-container">
    {{template "nav" .}}
    <div class="search-root">
        <div>
            <div>
                <div class="input-group input-class">
                    <input type="text" class="form-control" placeholder="请输入关键字" aria-describedby="sizing-addon1"
                           id="searchVal">
                    <span class="input-group-addon" id="searchBtn">搜索</span>
                </div>
            </div>
        </div>
        <div class="search-result">

        </div>
    </div>
</div>
</body>
<script>
    var pageNo = 1;
    var pageSize = 30;
    // var pageNo = page;
    var searchParms = {
        from: 0,
        size: 20,
        query: {
            multi_match: {
                query: "",
                // type: "best_fields",
                fields: ["Title", "BlogHtml"]
            }
        }
    }


    $(function () {
        $("#searchVal").keypress(function (e) {
            if (e.which == 13) {
                search();
            }
        });
        $("#searchBtn").click(function () {
            search();
        })

        function search() {
            var searchVal = $("#searchVal").val()
            if (!searchVal || searchVal.trim().length == 0) {
                layer.msg("请输入查询内容")
                return
            }
            searchParms.query.multi_match.query = searchVal;
            var stringify = JSON.stringify(searchParms);
            $.ajax({
                url: "https://www.aiprose.com/es/search",    //请求的url地址
                headers: {'Content-Type': 'application/json;charset=utf8'},
                dataType: "json",   //返回格式为json
                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                data: stringify,    //参数值
                type: "POST",   //请求方式
                beforeSend: function () {
                    //请求前的处理
                },
                success: function (resp) {
                    $(".search-result").children().remove();
                    if (resp.hits.total != 0) {
                        resp.hits.hits.forEach(function (el, index) {
                            console.log(el._source)
                            var htmlStr = '<div class=\"search-item\">\n' +
                                '                <div class=\"search-title\"><a href=\"https://www.aiprose.com/blog/' + el._source.Id + '\" target=\"_blank\">' + el._source.Title + '</a><span>' + dayjs(el._source.Ctime).format("YYYY-MM-DD") + '</span></div>\n' +
                                '                <p class=\"search-content\">' + el._source.BlogDesc + '</p>\n' +
                                '           </div>'
                            $(".search-result").append(htmlStr)
                        })
                    }else{
                        $(".search-result").append('<p>没有搜索到相关文章</p>')
                    }
                    //请求成功时处理
                },
                complete: function () {
                    //请求完成的处理
                },
                error: function () {
                    //请求出错处理
                }
            })
        }
    })
</script>
</html>
搜索页成功拿到数据 6 lat temu			`{{template "header" .}}`
			`<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">`
			`<title>搜索 - 码农随笔</title>`
es搜索 5 lat temu			`<script src="https://unpkg.com/dayjs@1.8.15/dayjs.min.js"></script>`
搜索页成功拿到数据 6 lat temu			`</head>`
			`<body>`
			`<div class="root-container">`
			`{{template "nav" .}}`
			`<div class="search-root">`
			`<div>`
			`<div>`
			`<div class="input-group input-class">`
			`<input type="text" class="form-control" placeholder="请输入关键字" aria-describedby="sizing-addon1"`
			`id="searchVal">`
			`<span class="input-group-addon" id="searchBtn">搜索</span>`
			`</div>`
			`</div>`
			`</div>`
es搜索 5 lat temu			`<div class="search-result">`
搜索页成功拿到数据 6 lat temu
			`</div>`
			`</div>`
			`</div>`
			`</body>`
			`<script>`
es搜索 5 lat temu			`var pageNo = 1;`
			`var pageSize = 30;`
			`// var pageNo = page;`
搜索页成功拿到数据 6 lat temu			`var searchParms = {`
			`from: 0,`
			`size: 20,`
			`query: {`
			`multi_match: {`
es搜索 5 lat temu			`query: "",`
搜索页成功拿到数据 6 lat temu			`// type: "best_fields",`
			`fields: ["Title", "BlogHtml"]`
			`}`
			`}`
			`}`
es搜索 5 lat temu

搜索页成功拿到数据 6 lat temu			`$(function () {`
细节优化 5 lat temu			`$("#searchVal").keypress(function (e) {`
			`if (e.which == 13) {`
			`search();`
			`}`
			`});`
搜索页成功拿到数据 6 lat temu			`$("#searchBtn").click(function () {`
细节优化 5 lat temu			`search();`
			`})`

			`function search() {`
搜索页成功拿到数据 6 lat temu			`var searchVal = $("#searchVal").val()`
			`if (!searchVal \|\| searchVal.trim().length == 0) {`
			`layer.msg("请输入查询内容")`
es搜索 5 lat temu			`return`
搜索页成功拿到数据 6 lat temu			`}`
es搜索 5 lat temu			`searchParms.query.multi_match.query = searchVal;`
搜索页成功拿到数据 6 lat temu			`var stringify = JSON.stringify(searchParms);`
			`$.ajax({`
es搜索 5 lat temu			`url: "https://www.aiprose.com/es/search", //请求的url地址`
es搜索 5 lat temu			`headers: {'Content-Type': 'application/json;charset=utf8'},`
搜索页成功拿到数据 6 lat temu			`dataType: "json", //返回格式为json`
			`async: true,//请求是否异步，默认为异步，这也是ajax重要特性`
			`data: stringify, //参数值`
			`type: "POST", //请求方式`
			`beforeSend: function () {`
			`//请求前的处理`
			`},`
			`success: function (resp) {`
es搜索 5 lat temu			`$(".search-result").children().remove();`
es搜索 5 lat temu			`if (resp.hits.total != 0) {`
			`resp.hits.hits.forEach(function (el, index) {`
			`console.log(el._source)`
			`var htmlStr = '<div class=\"search-item\">\n' +`
			`' <div class=\"search-title\"><a href=\"https://www.aiprose.com/blog/' + el._source.Id + '\" target=\"_blank\">' + el._source.Title + '</a><span>' + dayjs(el._source.Ctime).format("YYYY-MM-DD") + '</span></div>\n' +`
			`' <p class=\"search-content\">' + el._source.BlogDesc + '</p>\n' +`
			`' </div>'`
			`$(".search-result").append(htmlStr)`
			`})`
es搜索 5 lat temu			`}else{`
			`$(".search-result").append('<p>没有搜索到相关文章</p>')`
es搜索 5 lat temu			`}`
搜索页成功拿到数据 6 lat temu			`//请求成功时处理`
			`},`
			`complete: function () {`
			`//请求完成的处理`
			`},`
			`error: function () {`
			`//请求出错处理`
			`}`
			`})`
细节优化 5 lat temu			`}`
搜索页成功拿到数据 6 lat temu			`})`
			`</script>`
			`</html>`