Skip to content

Instantly share code, notes, and snippets.

@amrrashed

amrrashed/autocomplete

Created October 27, 2014 15:29
Show Gist options
  • Save amrrashed/527bc647f42724d9f6f1 to your computer and use it in GitHub Desktop.
Save amrrashed/527bc647f42724d9f6f1 to your computer and use it in GitHub Desktop.
Download ZIP
autocomplete from database+bootstrap typehead
Raw
autocomplete
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us">
<title></title>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/typeahead.js"></script>
<style>
.typeahead-devs, .tt-hint,.university_ID {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 300px;
}
.tt-dropdown-menu {
width: 300px;
margin-top: 5px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 8px 8px;
font-size: 18px;
color: #111;
background-color: #F1F1F1;
}
</style>
<script>
$(document).ready(function() {
$('input.university_ID').typeahead({
name: 'university_ID',
remote : 'univerid.php?query=%QUERY'
});
});
</script>
</head>
<body>
<div>
<form method="POST" action="#">
<h3>Select data from Database</h3>
<input type="text" id="university_ID" name="university_ID" size="20" class="university_ID" placeholder="ادخل الرقم الاكاديمي">
</form>
</div>
</body>
</html>
Raw
databasetable
-- phpMyAdmin SQL Dump
-- version 4.2.7.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Oct 27, 2014 at 04:28 PM
-- Server version: 5.6.20
-- PHP Version: 5.5.15
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `teachercollage`
--
-- --------------------------------------------------------
--
-- Table structure for table `basic_information`
--
CREATE TABLE IF NOT EXISTS `basic_information` (
`ID` int(11) DEFAULT '0',
`university_ID` int(11) NOT NULL DEFAULT '0',
`first_name` varchar(50) DEFAULT NULL,
`middle_name` varchar(50) DEFAULT NULL,
`last_name` varchar(50) DEFAULT NULL,
`family` varchar(50) DEFAULT NULL,
`birthdated` varchar(155) DEFAULT NULL,
`placebirth` varchar(155) DEFAULT NULL,
`dept` varchar(255) DEFAULT NULL,
`gen_specific` varchar(255) DEFAULT NULL,
`address` varchar(255) DEFAULT NULL,
`tele` varchar(150) DEFAULT NULL,
`mobile` varchar(50) DEFAULT NULL,
`mail` varchar(255) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- Dumping data for table `basic_information`
--
INSERT INTO `basic_information` (`ID`, `university_ID`, `first_name`, `middle_name`, `last_name`, `family`, `birthdated`, `placebirth`, `dept`, `gen_specific`, `address`, `tele`, `mobile`, `mail`) VALUES
(111, 1234, 'aaaaaaaaaa', 'bbbb', 'ccccccccc', 'ddddddddd', '1433-5-6', 'uuuuu', 'اللغة العربية', 'لغة عربية', ' jjjjjjjjjjjjjjjjjj ', '77777777', '999999', '[email protected]'),
(777, 8888, 'hhhh', 'jjjjjjjjj', 'pppppp', 'lllllllllll', '0-0-0', 'gggff', 'اللغة الانجليزية', 'لغة انجليزية', ' ', '', '', ''),
(7778, 4455, 'aaaa', 'bbbb', 'cccc', 'ddddd', '1433-5-6', 'ffffff', 'اللغة العربية', 'لغة انجليزية', ' sssssssssssssssssssss ', '2222222222', '55555555', '[email protected]'),
(2147483647, 55555555, 'قققققق', 'ععععععععع', 'ححححححح', 'بببببببب', '1385-4-5', 'ااااااااااااا', 'الاجتماعيات', 'المناهج والتقنيات', ' ', '', '', ''),
(2147483647, 7777, 'قققققق', 'ععععععععع', 'ححححححح', 'بببببببب', '1385-4-5', 'ااااااااااااا', 'الاجتماعيات', 'المناهج والتقنيات', ' ', '', '', ''),
(444, 12346, 'سسسسس', 'سسسسسس', 'سسسسسسسس', '', '0-0-0', '', '0', '0', ' ', '', '', ''),
(5555, 123488, 'rrrr', 'hhhhhhh', 'pppppppp', '', '0-0-0', '', '0', '0', ' ', '', '', ''),
(555, 123468, 'qqqq', 'yyyyyy', 'uuuuuu', 'kkkkkkk', '1383-3-4', 'ggggggggggg', 'اللغة الانجليزية', 'المناهج والتقنيات', ' hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh', '88888888', '7777777777', '[email protected]'),
(666, 123469, 'aaaa', 'bbb', 'cccc', 'dddd', '1385-4-4', '', '0', '0', ' ', '', '', ''),
(33444, 233, 'aaa', 'ffff', 'gggg', 'kkkk', '1383-3-5', 'wwwwwwwwww', 'اللغة الانجليزية', 'لغة انجليزية', ' ddddddddddddddddddddddddddddd ', '33333333', '444444444', '[email protected]');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `basic_information`
--
ALTER TABLE `basic_information`
ADD PRIMARY KEY (`university_ID`);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Raw
univerid.php
<?php
$host = "localhost";
$uname = "root";
$pass = "";
$database = "teachercollage";
$conn=mysqli_connect($host,$uname,$pass) or die("connection in not ready <br>");
mysqli_select_db($conn,$database) or die("database cannot be selected <br>");
if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$sql = mysqli_query ($conn,"SELECT * FROM basic_information WHERE university_ID LIKE '%{$query}%'");
$array = array();
while ($row = mysqli_fetch_assoc($sql)) {
$array[] = $row['university_ID'];
}
echo json_encode ($array); //Return the JSON Array
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment