-1

这两天我一直在寻找，我似乎无法找到解决方案。

我正在努力让一个小应用程序在可搜索的列表视图中列出我们公司的所有员工。尽管我设法让代码在模拟器和我的 iphone 中都能正常工作，但关于创建可搜索列表视图的 jquery 的部分没有显示出来。我想我通过 js 和 css 链接检查了两次和三次，但我仍然一无所知。任何帮助将非常感激。

顺便说一句，我使用的是 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;
}
4

1 回答 1

0

我找到了解决方案。我链接的 jquery 脚本的顺序是错误的。

现在出现过滤选项。虽然，键盘没有激活。我会继续寻找这个。

于 2013-01-21T20:25:26.727 回答