У меня есть Autocomplete, который работает отлично, но у меня возникли проблемы с выяснением того, как перенаправить пользователя на отдельную веб-страницу, содержащую информацию о его выборе, нажав ENTER на клавиатуре. Сам сайт не обязательно должен существовать, я просто хочу знать код, предполагающий, что веб-сайт уже существует.
index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Autocomplete using PHP/MySQL and jQuery</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <div class="header"> </div><!-- header --> <h1 class="main_title">Autocomplete using PHP/MySQL and jQuery</h1> <div class="content"> <form> <p>Table consists of : ID, Location, Slug, Population </p> <br><br> <div class="label_div">Search for a Slug : </div> <div class="input_container"> <input type="text" id="slug" onkeyup="autocomplet2()"> <ul id="list_id"></ul> </div> </form> <br><br><br><br> <p>List will be ordered from Highest population to lowest population (Top to bottom)</p> <br><br> </div><!-- content --> <div class="footer"> Powered by Jason's Fingers</a> </div><!-- footer --> </div><!-- container --> </body> </html> script.js:
// autocomplete : this function will be executed every time we change the text function autocomplet2() { var min_length = 3; // min caracters to display the autocomplete var keyword = $('#slug').val(); if (keyword.length >= min_length) { $.ajax({ url: 'ajax_refresh.php', type: 'POST', data: {keyword:keyword}, success:function(data){ $('#list_id').show(); $('#list_id').html(data); } }); } else { $('#list_id').hide(); } } // set_item : this function will be executed when we select an item function set_item(item) { // Changes input to the full name on selecting $('#slug').val(item); // Hides list after selection from list $('#list_id').hide(); } function change()
ajax_refresh.php:
<?php // PDO connect ********* function connect() { return new PDO('mysql:host=localhost;dbname=wallettest', 'root', 'butthead', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")); } $pdo = connect(); $keyword = '%'.$_POST['keyword'].'%'; $sql = "SELECT * FROM population WHERE slug LIKE (:keyword) ORDER BY population DESC LIMIT 0, 10"; $query = $pdo->prepare($sql); $query->bindParam(':keyword', $keyword, PDO::PARAM_STR); $query->execute(); $list = $query->fetchAll(); foreach ($list as $rs) { // put in bold the written text $slug = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['slug']); // add new option echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['slug']).'\')">'.$slug.'</li>'; } ?>
Прослушайте событие keydown и проверьте, нажата ли клавиша ввода, проверив код ключа.
input.on('keydown', function (ev) { if (ev.keyCode === 13) { //enter's keycode is 13 //redirect code } });
Вам также может ev.preventDefault() если ключ ввода обычно будет делать что-то нежелательное.