Искать страницы сайта в Bootstrap

search twitter-bootstrap-3

89 просмотра

1 ответ

Я новичок, пытаюсь научить себя программированию. Я знаю HTML и недавно изучил основы синтаксиса Javascript и начальной загрузки - я понимаю, что лучший способ научиться - это что-то создавать. Поэтому я пытаюсь создать веб-сайт, где пользователи могут искать известных людей, чтобы увидеть, какие книги они рекомендуют. Например, если я хочу знать, какие книги порекомендует Элон Маск, я смогу напечатать его имя, и я перейду на страницу, где есть список всех рекомендованных им книг.

У меня есть готовая страница указателя, похожая на 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>

Автор: Urvesh Vasani Источник Размещён: 08.11.2019 11:30

Ответы (1)


1 плюс

Как вы сказали, лучший способ научиться - это создать что-то самостоятельно с нуля. Для создания описанного вами функционала вам необходимо:

  • сервер для ответа на запросы браузера. Я предлагаю начать с Node JS, особенно с Express ( https://expressjs.com/ ). Это действительно просто установить и начать.
  • база данных (или просто статический файл json) с узлом, который вы можете использовать, например, Mongo db с Mongoose ( http://mongoosejs.com/ )
  • Фронт-энд-фреймворк и библиотеки, которые вы используете, это нормально! Добавьте React js ( https://facebook.github.io/react/ ) к этому, и вы готовы к работе!

Поэтому я предлагаю использовать эти библиотеки / фреймворки и учиться понемногу. Начните с сервера и попробуйте создать несколько основных страниц (или просто страницу). Вы можете получить данные автозаполнения затем с помощью AJAX techinque. В React есть много хорошо написанных компонентов, и, например, для автозаполнения ajax вы можете использовать это: https://jedwatson.github.io/react-select/

Счастливого обучения!

Автор: Hardy Размещён: 20.08.2016 03:51
Вопросы из категории :
32x32