Question

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

我已准备好索引页面，看起来像google，我正在努力了解如何让搜索栏正常运行，以便人们可以搜索我要构建的所有页面。我意识到我需要自动完成功能，所以人们可以输入人名的前几个字母，然后点击建议去页面。

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

 #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>

Answer 1

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

服务器用于响应浏览器发出的请求。我建议从节点js 开始，尤其是 express （https://expressjs.com/）。它的安装和入门非常简单。
数据库（或只是静态json文件），您可以使用节点 Mongo db Mongoose （http://mongoosejs.com/）
前端框架和库你正在使用bootstrap，这很好！添加 React js （https://facebook.github.io/react/），您就可以开始了！

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

快乐学习！

在Bootstrap中搜索网站页面

1 个答案: