<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script>
function loadXMLDoc(url)
{
window.plugins.Orientation.lock("portrait")
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Company</th><th>Country</th><th>City</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + " <tr>";
xx=x[i].getElementsByTagName("COMPANY");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("COUNTRY");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<!--Home-->
<div id="home" data-role="page" data-mini="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Welcome</h1>
</div>
<div class="info-wrapper">
<div class="info-wrapper-left">
<img class="ice-logo"/>
</div>
<div class="clear"></div>
</div>
<div data-role="content">
<ul data-role="listview" id="a" data-inset="true" data-theme="d">
<li>
<a href="#home1" data-transition="slide">
Services
</a>
</li>
</ul>
<ul data-role="listview" id="a" data-inset="true" data-theme="d">
<li>
<a href="#home2" data-transition="slide">Port</a>
</li>
</ul>
<ul data-role="listview" id="a" data-inset="true" data-theme="d">
<li>
<a href="#home3" data-transition="slide">teasr</a>
</li>
</ul>
<ul data-role="listview" id="c" data-inset="true" data-theme="d">
<li>
<a href="#home4" data-transition="slide">cvServices</a>
</li>
</ul>
</div>
</div>
<!--Home End-->
<!--programProgress page-->
<div id="programProgress" data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Progress</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="Ul3" data-inset="true" data-theme="d">
<li>Coming Soon!</li>
</ul>
</div>
</div>
<div id="**search**" data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Service Company Search</h1>
</div>
<div data-role="content">
<form id="search" action="#samp">
<div data-role="fieldcontain">
<label for="company">Company</label>
<input type="text" id="company" name="company" class="required company" />
</div>
<div data-role="fieldcontain">
<label for="country">Country</label>
<input type="text" id="country" name="country" class="required" />
</div>
<div data-role="fieldcontain">
<label for="city">City</label>
<input type="text" id="city" name="city" class="required" />
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button id="btnCancel" data-theme="d">Cancel</button>
</div>
<div class="ui-block-b">
<a href="#samp" data-transition="slide"><button onclick="loadXMLDoc('cd_catalog.xml')">SEARCH</button></a>
</div>
</fieldset>
</div>
</form>
</div>
</div>
<!--Service Company Search End-->
<div id="samp" data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Service Company Search</h1>
</div>
<div id="txtCDInfo" data-role="content">
</div>
</div>
</body>
</html>
これはPhonegapアプリケーションです。ここでは、javascript または jquery を使用して、xml ファイルでテキスト ボックスをオートコンプリートする必要があります。
たとえば 、国を入力し始めると国フィールドを取得すると、入力した特定の文字をフィルタリングする xml のリストが自動的に完成するはずです。