浅谈React实现搜索匹配

傷城~ 2022-06-17 09:18 241阅读 0赞

search.html：

<!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" href="search.css">
    		<script src="build/react.js"></script>
    		<script src="build/react-dom.js"></script>
    		<script src="build/browser.min.js"></script>
    	</head>
    	<body>
    		<div id="search"></div>
    		<script type="text/babel" src="search.jsx"></script>
    	</body>
    </html>

search.js：

var Search = React.createClass({
    	getInitialState: function() {
    		return {lists: [], temp: []}
    	},
    	update: function() {
    		this.state.temp = [];
    		var value = this.refs.textInput.value;
    		var lists = this.state.lists;
    		for (var i = 0; i < lists.length; i++) {
    			if (value != "" && lists[i].indexOf(value) == 0) // 注意value为空的情况
    				this.state.temp.push(lists[i]);
    		}
    		this.setState({temp: this.state.temp});
    	},	
    	addList: function(e) {
    		e.preventDefault();
    		if (this.state.lists.indexOf(this.refs.textInput.value) == -1) // 为避免添加重复数据，若数据已存在于state的lists中，则不再添加
    			this.state.lists.push(this.refs.textInput.value);
    		this.setState({lists: this.state.lists});
    		this.refs.textInput.value = "";
    		this.state.temp = [];
    		this.setState({temp: this.state.temp});
    	},	
    	selectList: function(index) {
    		this.refs.textInput.value = document.getElementById(index).innerText;
    		this.state.temp = [];
    		this.setState({temp: this.state.temp});
    	},
    	render: function() {
    		return (
    			<div>
    				<form onSubmit={this.addList}>
    					<input type="text" placeholder="Please enter your name!" ref="textInput" autoComplete="off" onChange={this.update}/>
    				</form>
    				<List lists={this.state.temp} selectList={this.selectList}/>
    			</div>
    		);
    	}
    });
    var List = React.createClass({
    	selectList: function(e) {
    		var index = e.target.getAttribute('id');
    		this.props.selectList(index);
    	},
    	render: function() {
    		return (
    			<ul id="lists">
    			{
    				this.props.lists.map(function(list, index) {
    					return (
    						<li id={index} key={index} onClick={this.selectList}> 
    							{list}
    						</li>
    					);
    				}.bind(this))
    			}
    			</ul>
    		);
    	}
    });
    ReactDOM.render(
    	<Search />,
    	document.getElementById("search")
    );

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈索引与搜索

简介介绍了索引尤其是倒排索引，再通过索引进行搜索。使用倒排索引和调整过滤顺序等手段，优化检索逻辑，避免每次搜索都要遍历所有数据。文章供6000余字，全文脉络如下：

水深无声/ 2023年10月04日 20:39/ 0 赞/ 94 阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 255 阅读

相关浅谈React实现过滤器

思路： 1、在最顶层组件中创建state； 2、监听底层组件的输入框和多选按钮的onchange事件，借助this.prop通过函数传递输入框和多选按钮的值给上层组件；

喜欢ヅ旅行/ 2022年06月17日 12:17/ 0 赞/ 301 阅读

相关浅谈React实现输入框

组件要实现的功能： 1、定制label和输入框的placeholder的内容； 2、输入的内容不符合正则表达式要求时，输入框标红，符合时标绿； 3、点击清除按钮后，按钮消

浅浅的花香味﹌/ 2022年06月17日 12:06/ 0 赞/ 398 阅读

相关浅谈React实现评论框（三）

[http://blog.csdn.net/zhouziyu2011/article/details/70504651][http_blog.csdn.net_zhouziyu

叁歲伎倆/ 2022年06月17日 10:51/ 0 赞/ 325 阅读

相关浅谈React实现评论框（二）

[http://blog.csdn.net/zhouziyu2011/article/details/70502495][http_blog.csdn.net_zhouziyu

Bertha 。/ 2022年06月17日 09:50/ 0 赞/ 235 阅读

相关浅谈React实现评论框（一）

结构：第一层——CommentBox 第二层——CommentList 第三层——Comment 第二层——CommentForm 1、JSX

心已赠人/ 2022年06月17日 09:49/ 0 赞/ 341 阅读

相关浅谈React实现搜索匹配

search.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" hr

傷城~/ 2022年06月17日 09:18/ 0 赞/ 242 阅读

相关浅谈React实现todolist

todoList.html： <!DOCTYPE html> <html> <head> <link rel="styleshee

爱被打了一巴掌/ 2022年06月17日 09:18/ 0 赞/ 238 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 332 阅读