BootStrap学习2 typeahead

时间:2021-06-07 15:43:19

首先看看这些

http://www.wrapcode.com/bootstrap/typeahead-json-objects/

http://*.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example

http://*.com/questions/16961561/update-function-for-typeahead

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="css/bootstrap.css" rel="stylesheet">
</head> <body>
<input type="text" id="myElement"/> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script> <script type="text/javascript">
$('#myElement').typeahead({
source: function (query, process) {
return $.getJSON(
'info2.php',
{ query: query },
function (data) {
return process(data.options);
});
}
});
</script>
</body>
</html>

后台

<?php
$query=$_REQUEST['query'];
$str="";
if(!empty($query))
if (false !== strpos($query, 'or')) {
$str="{\"options\": [\"ori 1\",\"ori 2\",\"ori 3\",\"ori 4\",\"ori 5\"]} ";
if(false !== strpos($query,'oric')){
$str="{\"options\": [\"oricon 1\",\"oricon 2\",\"oricon 3\",\"oricon 4\"]} ";
} }else if(false !== strpos($query, 'de')){
$str="{\"options\": [\"Dell 1\",\"Dell 2\",\"Dell 3\",\"Dell 4\"]} ";
}else if(false !== strpos($query, 'ro')){
$str="{\"options\": [\"royal ships\",\"Royal Caribbean\",\"Royal Cruises\",\"royal 4\"]} ";
} echo $str; ?>

strpos函数就用来检测是否含有子串