码迷,mamicode.com
首页 > Web开发 > 详细

jquery自动填充输入框

时间:2014-12-12 22:01:01      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   color   os   使用   sp   for   

1,这是一个比较简单的页面,你可以复制下来就可以使用。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>

<div class="ui-widget">
<label for="tags">标签:</label>
<input id="tags">
</div>


</body>
</html>


2.实战自动填充数据:
(1)页面:
$("#account_name").focus(function(){
var sel = $(‘#select‘).val();
var auto_able = !$(this).data(‘autocomplete‘);
if(auto_able)
{
$(this).autocomplete(
{
autoFocus: true,//自动获得焦点
minLength: 0,
autoFill: true, //要不要在用户选择时自动将用户当前鼠标所在的值填入到input框,Default: false
source: ‘__URL__/autoCompleteAccount‘, //这是路径,也是数据源。
select: function (event, ui) {
$("#account_name").val(ui.item.label);
window.location.href = "__URL__/order?sel="+sel+"&account_id="+ui.item.id;
return false;
}
}
);
}
});

输入框:
<input type="text" placeholder="请输入帐号名称" id="account_name" name="account_name" autocomplete="off" value="{$accountName}">

(2).控制器:
public function autoCompleteAccount(){
$flag_arr = array();
if($_GET[‘term‘]){
foreach( $this->_account as $key=>$ac){
if ( stripos( $ac , trim($_GET[‘term‘]) ) !== false )
$flag_arr[] = array(
‘id‘ => $key,
‘label‘ => $ac,
);
}
}
echo json_encode($flag_arr);exit; //以json的方式
}





jquery自动填充输入框

标签:style   http   io   ar   color   os   使用   sp   for   

原文地址:http://www.cnblogs.com/kobigood/p/4160432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!