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的方式}
时间： 2024-10-17 18:24:37