我一直在寻找最近两天,我似乎无法找到解决方案。
我正在努力想要一个小应用程序,以可搜索的列表视图列出我们公司的所有员工。虽然我设法让代码在模拟器和我的iphone中运行,但是关于创建可搜索列表视图的jquery的部分没有显示出来。我认为我通过js和css链接进行了双重和三重检查,但我仍然无能为力。任何帮助都会非常感激。
BTW,我正在使用Xcode 4.5.2,Jquery-mobile-1.2.0和cordova-2.3。
这是index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page">
<div data-role="header" id="header" class="header">
<h1>MIT Employees</h1>
</div><!-- /header -->
<div data-role="content" id="header2">
<h2>Select Employee</h2>
</div><!-- /content -->
<div id="wrapper">
<ul data-role="listview" data-inset="true" data-filter="true"><div data-role="content" id="employeeList"></div></ul>
</div>
<div id="busy"/>Loading...</div>
<script src="js/phonegap.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/getEmpList.js"></script>
<script src="js/employ.js"></script>
</div>
</body>
</html>
这里是Javascript:
var db;
var dbCreated = false;
var scroll = new iScroll('wrapper', { vScrollbar: true, hScrollbar:false, hScroll: false });
//add listener when device ready
document.addEventListener("deviceready", onDeviceReady, false);
//function will be called when device ready
function onDeviceReady() {
db = window.openDatabase("EmployeeDirectoryDB", "1.0", "MIT Employee Database", 200000);
if (dbCreated)
db.transaction(getEmployees, transaction_error);
else
db.transaction(populateDB, transaction_error, populateDB_success);
}
function transaction_error(tx, error) {
$('#busy').hide();
alert("Database Error: " + error);
}
function populateDB_success() {
dbCreated = true;
db.transaction(getEmployees, transaction_error);
}
function getEmployees(tx) {
var sql = "select * from employees order by lname, fname";
tx.executeSql(sql, [], getEmployees_success);
}
function getEmployees_success(tx, results) {
$('#busy').hide();
var len = results.rows.length;
for (var i=0; i<len; i++) {
var employee = results.rows.item(i);
$('#employeeList').append('<li data-icon="arrow-r"><a href="employeedetails.html?id=' + employee.id + '">' +
'<p class="line2">' + employee.empid + ' ' + employee.lname + ', ' + employee.fname + '</a></li>');
}
setTimeout(function(){
scroll.refresh();
},100);
db = null;
}
答案 0 :(得分:0)
我找到了解决方案。我链接的jquery脚本的顺序是错误的。
现在出现过滤选项。虽然,键盘不活跃。我会继续寻找这个。