JavaScript实现搜索对应的符号——获取表单数据

1、html部分

1.1 写一个表单

<form class="search-form">
	<input type="text" class="search" placeholder="City or State">
	<ul class = "suggestion">
		<li>Filter for a city</li>
		<li>or a state</li>
	</ul>
</form>

2、CSS部分

2.1 背景图片

设置背景颜色，字体样式

*{
	box-sizing:border;
}

html{
	background:#ffc600;
	font-family:'helvetica neue';
	font-size:20px;
	font-weight:200;
}

2.2 表单样式设置

.search-form {
  max-width: 400px;
  margin: 50px auto;
}

2.3 input样式

2.3.1 input总体样式

input{
	width:100%;
	padding:20px;
}

2.3.2 input的样式

input.search {
  /*文字部分*/
  font-size: 40px;
  text-align: center;

  /*布局*/
  margin: 0;
  outline: 0;
  left: -10%;
  position: relative;
  top: 10px;

  /*外观*/
  border: 10px solid #F7F7F7;
  width: 120%;
  border-radius: 5px;
  z-index: 2;/*优先级*/
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);

}

2.4 ul表单

.suggestions {
  margin: 0;
  padding: 0;
  position: relative;
  /*perspective: 20px;*/
}

.suggestions li {
  background: white;
  list-style: none;
  border-bottom: 1px solid #D8D8D8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  margin: 0;
  padding: 20px;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;/*两端对齐，中间间隔相等*/
  text-transform: capitalize;/*首字母大写*/
}

/*even代表选择偶数列*/
.suggestions li:nth-child(even) {
  transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.0018);
  background: linear-gradient(to bottom,  #ffffff 0%,#EFEFEF 100%);
}

/*odd代表选择奇数列*/
/*linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。*/
.suggestions li:nth-child(odd) {
  transform: perspective(100px) rotateX(-3deg) translateY(3px);
  background: linear-gradient(to top,  #ffffff 0%,#EFEFEF 100%);/*从下到上（to-》到）*/
}

span.population {
  font-size: 15px;
}

.hl {
  background: #ffc600;
}

:::important

1. 关于角度的单位

2. 关于transform的perspective

相关链接：https://www.cnblogs.com/yanggeng/p/11285856.html

3. 关于背景渐变色————linear-gradient（）

   /* 渐变轴为45度，从蓝色渐变到红色 */
   linear-gradient(45deg, blue, red);

   /* 从右下到左上、从蓝色渐变到红色 */
   linear-gradient(to left top, blue, red);

   /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
   linear-gradient(0deg, blue, green 40%, red);

4. 关于translate3D
   

3、JavaScript部分

3.1 获取网页的数据(三种方法)

（1）原生的JS写的

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
let req = new XMLHttpRequest();
req.open("get",endpoint);
req.send();

(2)fetch

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

let cities = null;
fetch(endpoint)
	.then(function(blog){
		return blog.json();
	})
	.then(function(myJson){
		return cities = myJson;
	})
//或者
let cities = null;
fetch(endpoint)
	.then((blob)=>{
		blob.json()
	})
	.then((data)=>{
		 cites = data;
	})

3.2 对数据进行处理

3.2.1 首先先获取input输入的数据

document.querySelector('.search').addEventListener("keyup",keyupHandler)

3.2.2 对监听事件进行处理

1、先完成监听事件的函数

function keyupHandler(){
	//监听事件
}

2、对输入的数据进行筛选（筛选用正则）

function keyupHandler(){
	const matchArray =  findMatches(this.value,cities);
}

这里的matchArray变量调用的是findMatch方法的正则。

function findMatch(){
	
}

3、正则函数

function findMatch(wordToMatch,cities){
	return cities.filter(function(place){
		const regexp = new RexExp(wordToMatch,'gi');
		return place.city.match(regexp) || place.state.match(regexp)
	})
}

3.3 对输入的数据进行样式的修改

1、map对数据进行整合

function keyupHandler(){
	const matchArray = findMatches(this.value,citite);
	
	const html = matchArray.map(place => {
		const regexp = new RegExp(this.calue,'gi');
		const cityName = place.city.replace(regexp,`<span class="hl">${this.value}</span>`);
		const stateName = place.state.replace(regexp,`<span class="hl">${this.value}</span>`);
		
		return `
		<li>
          <span class="name">${cityName}, ${stateName}</span>
          <span class="population">${numberWithCommas(place.population)}</span>
        </li>
		
		`
	}).join('')
}

2、numberWithCommas()函数

function numberWithCommas(x){
	return (x * 1).toLocaleString();//(x*1是做类型的转换)
}

3、最后将得到转换后的数据传递给ul列表

在join(’’)后面

document.querySelector('.suggestions').innerHTML = html;

4、最后需要注意的 （JS还是保持优良习惯加分号）

/**这里需要注意，return后面的 ` 不能有回车
     * 在return语句之后的不可达的语句会在下列情形中产生：
         在return 语句之后出现其他表达式；
         在省略分号的return语句之后直接接一个表达式。
     * 当一个表达式出现在一个有效的 return 表达式之后时，会出现这个警告，用以说明在 return 语句之后的表达式不可达，即这条语句之后的表达式永远不会运行。

     *为什么我需要在 return 语句之后添加分号？
        在省略分号的 return 语句之后，开发者想要终止当前函数的执行还是返回return之后表达式的结果的意图是不明确的。这个警告表明这种情况下 return 语句的表述具有二义性。
     */