自己做了一个根据搜索关键字的首拼来查找的demo；
主要是步骤，是将搜索的结果缓存到本地 我因为是demo，所以用的是sessionStorage，如果用到项目里面得用localStorage
function setinp(){
let value = $("inp").value,
//暂时不用管这个函数里面调用的函数,后面会写全代码
//这里主要用途如果不重复就push，否则什么也不干
list = getlist();
if("" != value && " " != value && null != value){
if(list.length > 0){
let flag = false;
for (let i = 0; i < list.length; i++)
if(value == list[i]) flag = !flag;
if(!flag)list.push(value);
}else{
list.push(value);
}
setlist(list);
}
setcontent(value);
}然后是将缓存和输入的做对比
window.onload = function(){
sethmain();
$("inp").addEventListener("input", function () {
let value = $("inp").value;
if(value)getlist2();
else sethmain();
})
}
function getlist2(){
let jsonst = "", list = [] , list2 = [],val = $("inp").value,pv = __pinyin.get(val),pvlist = pv.l.split("");
list = getlist();
//重要的地方
//主要用处就是将输入的值与缓存的值对比，是否相似，也就是汉字首字母的对比
//如果是相似，立马结束循环（提高点效率，因为已经用到三层循环了）
//然后将与缓存的相似值从新innerHTML到页面
//比如，输入k 马上就能看到 “裤子”，“亏本”之类的按钮，可以直接点击
//还有一个重要函数是 p2 = __pinyin.get(list[i]);
//这个函数是我在网上下载的,补全了里面的个把文字，我自己在弄一个新连接下载（不要见怪）
for (let i = 0; i < list.length; i++) {
for (let z = 0; z < pvlist.length; z++) {
let flag = true,
p2 = __pinyin.get(list[i]),
p2list = p2.l.split("");
for (let j = 0; j < p2list.length; j++) {
if(pvlist[z].indexOf(p2list[j]) != -1){
list2.push(list[i]);
flag = !flag;
break;
}
}
if(!flag)break;
}
}
list2 = qc(list2);
sethmain(list2);
}pinyin.js 地址: pinyin.js
其他的倒没什么难点了，很容易就看懂了。
当然，这是一个新手写的，如果逻辑比较粗糙，请见怪。
最后附上全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
html,body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.main{
width: 100%;
height: 100%;
}
.conter{
width: 100%;
height: 100%;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/
background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #15A216),color-stop(1, #fafafa));/* Safari & Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa'); /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"; /* IE8 */
}
.head{
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
input{
width: 50%;
height: 30px;
font-size: 20px;
padding-left: 20px;
border: 1px solid #ccc;
border-radius: 20px;
}
button{
height: 32px;
width: 50px;
background-color: white;
border: 1px solid #ccc;
border-radius: 20px;
padding: 0 10px;
margin: 0 20px;
}
.h-text{
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.h-main{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
padding: 10px;
}
.text{
padding: 5px;
margin: 5px 10px;
border: 1px solid sienna;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="main">
<div class="conter">
<div class="head">
<input type="" name="inp" id="inp" value="" />
<button onclick="setinp()">搜索</button>
</div>
<div class="h-text">
<div class="h-main" id="h-main">
<div class="text">
11111111111
</div>
</div>
</div>
<div class="" id="content">
</div>
</div>
</div>
<script src="js/pinyin.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
sethmain();
$("inp").addEventListener("input", function () {
let value = $("inp").value;
if(value)getlist2();
else sethmain();
})
}
function sethmain(tp){
var list = [];
//console.log("tp",tp);
if(!tp){
list = getlist();
}else{
list = tp;
}
//console.log("list",list);
let str = "";
for (let i = 0; i < list.length; i++) {
str += "<div class='text' onclick=\"setcontent('" +list[i] + "')\">" + list[i] +"</div>";
}
$("h-main").innerHTML = str;
}
function getlist2(){
let jsonst = "", list = [] , list2 = [],val = $("inp").value,pv = __pinyin.get(val),pvlist = pv.l.split("");
list = getlist();
for (let i = 0; i < list.length; i++) {
for (let z = 0; z < pvlist.length; z++) {
let flag = true,
p2 = __pinyin.get(list[i]),
p2list = p2.l.split("");
for (let j = 0; j < p2list.length; j++) {
if(pvlist[z].indexOf(p2list[j]) != -1){
list2.push(list[i]);
flag = !flag;
break;
}
}
if(!flag)break;
}
}
list2 = qc(list2);
sethmain(list2);
}
function setinp(){
let value = $("inp").value,
list = getlist();
if("" != value && " " != value && null != value){
if(list.length > 0){
let flag = false;
for (let i = 0; i < list.length; i++)
if(value == list[i]) flag = !flag;
if(!flag)list.push(value);
}else{
list.push(value);
}
setlist(list);
}
setcontent(value);
}
function setlist(arr){
let list = slist(arr);
sessionStorage.setItem("list",list);
}
function getlist(){
let jsonst = "", list = [];
if(sessionStorage.getItem("list")){
let jsonst = sessionStorage.getItem("list");
list = plist(jsonst);
}
return list;
}
function slist(list){
return JSON.stringify(list);
}
function plist(list){
return JSON.parse(list);
}
function setcontent(value){
$("content").innerHTML = "搜索结果:" + value;
sethmain();
}
function $(id){
return document.getElementById(id);
}
function qc(array) {
let r = [];
for(let i = 0, l = array.length; i < l; i++) {
for(let j = i + 1; j < l; j++)
if(array[i] === array[j]) j = ++i;
r.push(array[i]);
}
return r;
}
/*let p1 = "张三";
let p2 = "长潮";
let p3 = "李四";
let p1py = __pinyin.get(p1);
console.log(p1py);
let p2py = __pinyin.get(p2);
console.log(p2py);
let p3py = __pinyin.get(p3);
console.log(p3py);*/
//let p1list = p1py.
/*
for (let z = 0; z < pvlist.length; z++) {
let flag = true,
p2 = __pinyin.get(list[i]),
p2list = p2.l.split("");
for (let j = 0; j < p2list.length; j++) {
if(pvlist[z].indexOf(p2list[j]) != -1){
list2.push(list[i]);
flag = !flag;
break;
}
}
if(!flag)break;
}
*/
</script>
</body>
</html>