在 Bootstrap 中搜索网站页面答案

【问题标题】：Search for website pages in Bootstrap在 Bootstrap 中搜索网站页面
【发布时间】：2016-08-20 15:28:16
【问题描述】：

我是初学者，正在尝试自学代码。我了解 HTML，并且最近学习了 Javascript 语法和引导程序的基础知识——我意识到最好的学习方法是构建一些东西。所以我正在尝试建立一个网站，用户可以在其中搜索名人以查看他们推荐的书籍。例如，如果我想知道 Elon Musk 会推荐什么书，我应该可以输入他的名字，然后它会带我到一个页面，那里有他推荐的所有书的列表。

我已经准备好索引页面，看起来像谷歌，我正在尝试了解如何让搜索栏正常工作，以便人们可以搜索我要构建的所有页面。我意识到我需要自动完成功能才能工作，这样人们才能输入人名的前几个字母，然后单击建议转到页面。

到目前为止，这是我的代码：

 #content {height: 100%;}
 html, body {height: 100%;}

 .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html>
<head>

<!-- Bootstrap JS from CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Bootstrap CSS from CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">

<title>Page Title</title>

</head>
<body>

 <div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="images/logo.png" width="270" height="95" alt="Google" id="logo"></div>
      <div class="span4"></div>
    </div>

<div class="row">    
	<div class="col-xs-8 col-xs-offset-2">
		<div class="input-group">
			<input type="text" class="form-control" name="x" placeholder="Search term...">
			    <span class="input-group-btn">
			    	<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
				</span>
		</div>
	</div>	        
</div>
</div>
</div>	

<div id="footer">
      <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div class="container">

          <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Submit</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">

            <li><a href="#">About</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Donate</a></li>

          </ul>
        </div>
      </div>
    </div>


</body>
</html>

【问题讨论】：

标签： search twitter-bootstrap-3

【解决方案1】：

正如您所说，最好的学习方法是从头开始自己构建一些东西。要创建您描述的功能，您需要：

服务器 用于响应浏览器发出的请求。我建议从 Node js 开始，尤其是 express (https://expressjs.com/)。安装和上手非常简单。
数据库（或只是静态 json 文件） 带有节点，您可以使用例如 Mongo db 和 Mongoose (http://mongoosejs.com/)
前端框架和库您正在使用引导程序，这很好！向其中添加 React js (https://facebook.github.io/react/) 即可开始使用！

所以我的建议是使用这些库/框架并一点一点地学习。从服务器开始并尝试创建一些基本页面（或只是页面）。您可以使用 AJAX 技术获取自动完成数据。 React 有很多编写良好的组件，例如对于 ajax 自动完成，您可以使用：https://jedwatson.github.io/react-select/

学习愉快！

【讨论】：

谢谢！我现在越来越近了！