基于ElasticSearch的Angularjs联想框功能实现

1、基于ElasticSearch的Angularjs联想框功能实现摘要：基于ElasticSearch实现Angularjs联想控件，可改善用户使用体验，让用户更快更准确地输入内容。结合ElasticSearch到达实时快速、稳定、可靠的搜索目的。ElasticSearch支持 使用JSON数据进展数据索引，使用当前主流的Angularjs框架和bootstrap实现输入框联想控件，可靠性高。关键词： ElasticSearch；Angularjs；联想框；Javascript；用户体验中图分类号： TP319文献标识码： A文章编号： 1672780020210040174030引言 随着互联

2、网的开展，网页开发与设计从注重功能化开展到更关注效果尤其是用户体验。用户交互式体验，功能应该更人性化1。目前主流MVC Javascript框架有：Angularjs、ReactJS。AngularJS2弥补了HTML在构建应用方面的缺乏。ElasticSearch3是一个开源的分布式搜索引擎，具有高可靠性，支持非常多的企业级搜索用例4，它对外提供一系列基于java和 的API，用于索引、检索、修改配置。 本文基于ElasticSearch提供的RESTful API，结合Angularjs框架及bootstrap实现了联想框功能。1相关技术综述1.1ElasticSearch Elastic

3、Search是一个基于Lucene构建的开源、分布式、RESTful搜索引擎，是优秀的全文检索和分析引擎。ElasticSearch基于高性能数据存储系统构建，集海量异构数据分析处理、元数据提取、索引数据统一构建管理、通用化检索接口于一体，系统由分布式的全文搜索引擎和海量数据索引效劳组成。针对海量异构数据进展预处理解析后形成构建索引的元数据，对元数据分析后，根据其特性形成索引映射机制，提取构建索引构造数据，并提供持久化机制。以统一的索引资源池为根底，屏蔽异构数据的复杂性，提供统一检索效劳。数据索引系统架构如图1所示。ElasticSearch提供基于 的Restful风格API接口，帮助用户实

4、现索引构建、海量数据检索、索引管理等功能。客户端使用网络恳求工具，如curl、Javascript、.NET、PHP、Ruby、python的 库等，都可以对索引系统软件发起访问恳求，通过通信端口与检索集群进展通信。1.2Angularjs框架 Angualarjs是Google开源的一款JavaScript MVC 。指令directives构造是Angularjsjs丰富HTML控件，开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加简洁、容易。Angularjs具有以下特点：实现数据双向绑定，从而大大减少js的代码冗余，使得view和controller数据实时同

5、步；代码模块化。Angularjs对Web应用进展归类，每个Web应用都离不开Controller、Directives、Factories、Filters、Services和Views；提供依赖注入。每个Module都可以通过依赖注入来调整不同类别，每个类别都有自己的功能，如View实现UI，Controller实现UI背后的业务功能等，从而大大降低模块之间的耦合度；支持测试驱动开发。 Angularjs处理模板 5：带有标记的HTMLDOMAngularjs模板引擎。Angualarjs的出现使得网页应用或挪动应用在高效率、跨平台和平安性等方面得到了显著提升6，该框架适宜单页应用，其交互方

6、式如图2所示。1.3搜索联想框 互联网时代用户体验至关重要。在搜索过程中，提供可靠有效的搜索提示对提升用户体验作用较大。用户每输入一个字或一个单词，搜索引擎会相应智能输出与之相关联且权重较高的关键词，省去输入全部字词的耗时，从而节省搜索时间，提升了用户体验。搜索联想框如图3所示。目前各大搜索引擎网站都有相应的智能搜索联想框，本文基于ElasticSearch、Angularjs，设计实现搜索联想框。2设计与实现2.1后台设计 ElasticSearch使用基于 协议，以JSON为数据交互的RESTful API。前端通过端口与ElasticSearch通信，也可通过curl命令与ElaticS

7、earch通信。 RESTful恳求格式为： curlCX'：/？'Cd '' VERB： 方法，包括GET，POST，PUT，HEAD，DELETE PROTOCOL： 或者 s协议； HOST：集群中任何一个节点的主机名，本地的节点为locolhost； QUERY_STRING：可选的查询恳求参数； BODY：一个JSON格式的恳求主体。 以统一的索引资源池为根底，屏蔽用户数据的复杂性，包括文件系统、小对象存储系统和云数据库的存储空间差异，时间、地理、数值、字符串、全文本等数据构造差异，向上提供统一的检索效劳，为字段检索提供词条查询和分析查询，根据多种查询

8、条件提供复合检索功能，通过匹配算法为检索结果计算得分和排序，辅助海量查询结果的挑选，此外还为上层应用提供过滤器和多种查询统计等效劳。数据检索效劳设计开发的目的是为海量数据管理提供支撑，进步数据的可管理性和可访问性。数据检索效劳模块如图4所示。2.2构建HTML布局 使用bootstrap7构建文本输入框，用于用户填写搜索信息。该文本框下，显示联想结果列表，在多个列表中选取用户需要的信息，其值即可同文本输入框绑定。点击“HIK一下按钮即触发搜索功能。 建立一个大区块容器，设置两个小区块容器：一块用于用户输入搜索信息，另一块用于实时显示联想结果，代码如下：HIK一下$watch方法会对angula

9、r事件的每一个$digest调用进展检查。假设在表达式上检测到变化，Angular会返回$digest循环。$watch函数承受两个必要参数，分别为watchExpression、listener/callback。前者可以是一个函数或一个作用域对象属性，后者作为回调的监听函数，只有在watchExpression发生改变时调用。监听函数会在初始化时调用一次，而此时newValue和oldValue的值都为undefined。 $scope.$watch'selectedvalue'，functionnewValue，oldValue / newValue表示selectedv

10、alue的新值 / oldValue表示selectedvalue的旧值 ； 由于Angularjs具有数据双向绑定性能，当view中数据发生变化时将反响至scope中，scope中的模型会动态更新。scope内置$watch函数监控model变化。当数据模型某部分发生变化时，$watch函数会快速发出通知。2.4联想结果 ElasticSearch提供REST API和简单查询，POST、GET恳求搜索数据。无论操作是更改映射还是文档索引，都需要使用REST API向ElasticSearch发送JSON构造数据。一旦监听数据发生变化，便立即向ElasticSearch发出恳求，以实时获取最

11、新的联想结果。2.5JavaScript设计 2.5.1JavaScript函数对文本输入框selectedvalue进展监听，一旦发生改变，向ElasticSearch发送JSON构造恳求；ElasticSearch返回恳求结果，将其结果绑定options；选中结果，将其与文本输入框值selectedvalue进展绑定。2.5.2JavaScript设计流程 联想框流程见图6。2.5.3JavaScript函数设计 联想框效果如图7所示。3结语 CSS与Javascript技术的出现，给网站设计与开发带CM24*4/7来了活力 9。本设计使用主流前端技术Bootstrap，Angularjs

12、，后端使用ElasticSearch分布式搜索引擎，极大进步了页面的加载速度及后台查询索引速度。联想搜索控件智能输出与之相关联且流量最大的关键词，从而省去字词输入，大大提升了用户体验，具实用价值。参考文献：1李冲，熊淑华，魏颖颖.基于CSS与JavaScript技术的Tab面板的设计与实现J.计算机技术与开展，2021，213：2830.2DARWIN P B，KOZLOWSKI P.AngularJS web application developmentEB/OL. s：/ codeproject /articles/637430/angularjsexampleapplication.3

13、波mRAFAT KUC MAREK ROGOZIN SKI.ElasticsearchM.北京： 电子工业出版社，2021.4俞诗源，程三军.大数据工具在网络攻击监测中的应用C.第30次全国计算机平安学术交流会论文集，2021.5李红.主流Javascript框架比较与分析J.鞍山师范学院学报，20214：4047.6顾学海，胡牧，蒋厚明，等.基于HTML5的混合挪动应用开发J.计算机系统应用，2021，255：237240.7FELSENSTEIN J.Confidence limits on phylogenies：an approach using the bootstrapJ.Evolution，