javascript - 我如何将此搜索转换为类似于 ubuntu 搜索

Question

我想实现基于ctrl + space bar被按下的搜索

1.它应该搜索我的导航 (此处为垂直导航)

2.应该在按下esc键时关闭

对我不起作用的事情:

1. 算法非常容易出错
2. 术语之间不匹配
3. 导航栏包含["home","profile","privillages","software"]的链接，这是我们感兴趣的搜索

下面是我的完整代码:

执行步骤:只需按[Aa-zZ]之间的任意字母搜索栏就会出现搜索这些术语中的任何一个 [“主页”、“个人资料”、“权限”、“软件”]

我正在尝试如下图所示的内容:

代码笔: https://codepen.io/eabangalore/pen/pOeELv/ (fork 进行编辑)

function match(str1, str2){
    var tmpValue = 0;
    var minLength = str1.length;
	if(str1.length > str2.length){
		var minLength = str2.length;
	}	
    var maxLength = str1.length;
	if(str1.length < str2.length){
		var maxLength = str2.length;
	}
    for(var i = 0; i < minLength; i++) {
        if(str1[i] == str2[i]) {
            tmpValue++;
        }
    }
    var weight = tmpValue / maxLength;
    return (weight * 100);
}


$(document).on('click','li a',function(e){
   e.preventDefault();
   console.log('hello world');
   var page =        $(this).closest('li').data('page');
   $('#content_show').html(page);
});

$(document).bind('keypress', function(e){
   // if(e.ctrlKey && e.keyCode == 32){
   //    console.log('control + space');
   // }    
   $('.search-area').show(); 
   var searchTerm = $('#search_term').val();
   
  var originalSearchTree = [];
  var foundItem = [];
   $('.main-navigation li:not(.dropdown)').each(function(){
      originalSearchTree.push($(this).data('page'));
   });
  console.log(originalSearchTree);
  originalSearchTree.forEach(function(item){
     if(match(searchTerm,item) >= 30){
       foundItem.push(item);
     }
  });
  console.log('found items',foundItem);
  var f = '';
  foundItem.forEach(function(found){
     f += `<div class="found-items">${found}</div>`;
    $('.search-results').html(f);
  });
});

html,
body{
    height: 100%;
}
ul.nav{display:inline-block;}
.nav-container{
    left: -200px;
}
.navbar-default {
    width: 200px;
    margin: 0;
    height: 100%;
    float: left;
}

.dropdown-menu {
    position: relative !important;
    width: calc(100% + 2px);
    box-shadow: none;
    border-radius: 0;
    margin: -1px 0 0 -1px;
}

.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header {
    float: none !important;
}

.navbar-right .dropdown-menu {
    left: 0;
    right: auto;
}

.navbar-nav.navbar-right:last-child {
    margin-right: 0;
}

#toggleNav {
    border-radius: 0;
    float:left;
    border: 1px solid black;
}

.title-row{
    padding-left: 10px;
    line-height: 2;
    display: inline-block;
    position: fixed;
    height: 30px;
    z-index: 990;
    width: 100%;
    border-bottom: 1px solid black;
    text-align: center;
}

#title-button{
    position: fixed;
    right: 5px;
    line-height: 2;
}

/* for search area */

.search-area{
    width: 100%;
    height: 100%;
    background: black;
    opacity: .8;
    z-index: 99999999999;
}
.search-bar{
  
}
.search-bar input{
  width:80%;
  position: relative;
  top:0;
}
.found-items{
  display: inline-block;
/*   width:auto; */
/*   height:40px; */
  padding:40px;
  background:#5496b1;
  margin-top:20px;
  text-align:center;
  margin-right:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand">Brand</a>
        </div>
        <ul class="nav main-navigation">
            <li class="active" data-page="home"><a href="#/home">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings  <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li data-page="profile"><a href="#/profile">profile</a></li>
                    <li data-page="privillages"><a href="#/privillages">privillages</a></li>
                </ul>
            </li>
            <li data-page="software"><a href="#/software">Software</a></li>
        </ul>
    </nav> 
</div>

<div class="simulate_page_load">
   <h3 id="content_show"></h3>
</div>

<div class="search-area" style="display:none;">
   <div class="search-bar">
     <input type="search" id="search_term">
  </div>
  <div class="search-results">

  </div>
</div>

Answer 1

希望这对你有帮助...

String.prototype.contains = function(string){
  return this.indexOf(string)>-1
}

$(document).on('click','li a',function(e){
   e.preventDefault();
   console.log('hello world');
   var page =        $(this).closest('li').data('page');
   $('#content_show').html(page);
});

$(document).bind('keyup', function(e){
  if(e.ctrlKey && e.keyCode === 32){
    console.log('control + space');
    $('.search-area').show().addClass('active');
    $('#search_term').focus();
  }
  if(e.keyCode === 27){
    $('.search-area').hide().removeClass('active');
  }
  if(e.keyCode === 9){
    return;
  }
  
  if($('.search-area').hasClass('active')){
    doMatching();
  }
});

function doMatching(){
  var searchTerm = $('#search_term').val();
  var originalSearchTree = [];
  var foundItem = [];
   $('.main-navigation li:not(.dropdown)').each(function(){
      originalSearchTree.push($(this).data('page'));
   });
  console.log(originalSearchTree);
  originalSearchTree.forEach(function(item){
    var fareItem = item.toLowerCase();
    var fareSearchTerm = searchTerm.toLowerCase();           if(fareItem.contains(fareSearchTerm)){
      foundItem.push(item);
    }
  });
  console.log('found items',foundItem);
  var f = '';
  foundItem.forEach(function(found){
     f += `<a href="#"><div class="found-items">${found}</div></a>`;
    $('.search-results').html(f);
  });

}

html,
body{
    height: 100%;
}
ul.nav{display:inline-block;}
.nav-container{
    left: -200px;
}
.navbar-default {
    width: 200px;
    margin: 0;
    height: 100%;
    float: left;
}

.dropdown-menu {
    position: relative !important;
    width: calc(100% + 2px);
    box-shadow: none;
    border-radius: 0;
    margin: -1px 0 0 -1px;
}

.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header {
    float: none !important;
}

.navbar-right .dropdown-menu {
    left: 0;
    right: auto;
}

.navbar-nav.navbar-right:last-child {
    margin-right: 0;
}

#toggleNav {
    border-radius: 0;
    float:left;
    border: 1px solid black;
}

.title-row{
    padding-left: 10px;
    line-height: 2;
    display: inline-block;
    position: fixed;
    height: 30px;
    z-index: 990;
    width: 100%;
    border-bottom: 1px solid black;
    text-align: center;
}

#title-button{
    position: fixed;
    right: 5px;
    line-height: 2;
}

/* for search area */

.search-area{
    width: 100%;
    height: 100%;
    background: black;
    opacity: .8;
    z-index: 99999999999;
}
.search-bar{
  
}
.search-bar input{
  width:80%;
  position: relative;
  top:0;
}
.found-items{
  display: inline-block;
/*   width:auto; */
/*   height:40px; */
  padding:40px;
  background:#5496b1;
  margin-top:20px;
  text-align:center;
  margin-right:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand">Brand</a>
        </div>
        <ul class="nav main-navigation">
            <li class="active" data-page="home"><a href="#/home">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings  <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li data-page="profile"><a href="#/profile">profile</a></li>
                    <li data-page="privillages"><a href="#/privillages">privillages</a></li>
                </ul>
            </li>
            <li data-page="software"><a href="#/software">Software</a></li>
        </ul>
    </nav> 
</div>

<div class="simulate_page_load">
   <h3 id="content_show"></h3>
</div>

<div class="search-area" style="display:none;">
   <div class="search-bar">
     <input type="search" id="search_term">
  </div>
  <div class="search-results">

  </div>
</div>