Började idag på ett utkast för framtida sök till vår Hitta Vård Nu-app. I dagsläget listar den vårdmottagningar i Västra Götalandsregionen, men navigering kan göras via karta. Dock saknas det en sökfunktion.
Så jag slängde in 1,6 miljoner kartpunkter från mapusers.com i Solr och har nu kodat ihop ett snabbt exempel som vår PhoneGap-konsult kan utvärdera.
När jag ändå var i farten sminkade jag samma funktion så den kan köras i mobiltelefoner med design från jQuery Mobiles standardtema, se bild till höger.
Exempelkod för sökning i Solr via jQuery och JSONP
<html> <head> <title>Search in Solr with jQuery/JSONP/AJAX</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script type="text/javascript"> function askSolr(query, callback) { $.ajax({ 'url': 'http://localhost:8983/solr/select', 'data': {'wt':'json', 'q':query}, 'success': function(data) { callback(data); }, 'dataType': 'jsonp', 'jsonp': 'json.wrf' }); } function SolrQuery(query) { // removes all previous list items $('#hits').empty(); askSolr(query, function(result) { //console.log(result); // iterates through the result for ( var i = 0; i < result.response.docs.length; i++ ) { //console.log(result.response.docs[i].name); // appends hits to the list $("#hits").append("<li><a href=\"" + result.response.docs[i].id + "\">" + result.response.docs[i].name + "</a></li>"); } }); }; </script> </head> <body> <h1>Search in Solr with jQuery/JSONP/AJAX</h1> <input type="text" placeholder="Input your search query" id="q" /> <input type="button" value="Search" onClick="SolrQuery($('#q').val())" /> <h2>Results</h2> <ol id="hits"></ol> </body> </html>
Exempelkod för Solr med jQuery Mobile
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Search in Solr with jQuery Mobile</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script type="text/javascript" src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"> </script> <script type="text/javascript"> function askSolr(query, callback) { $.ajax({ 'url': 'http://localhost:8983/solr/select', 'data': {'wt':'json', 'q':query}, 'success': function(data) { callback(data); }, 'dataType': 'jsonp', 'jsonp': 'json.wrf' }); } function SolrQuery(query) { // removes all previous list items //$('#hits').empty(); $('.hit').remove(); askSolr(query, function(result) { //console.log(result); // iterates through the result for ( var i = 0; i < result.response.docs.length; i++ ) { //console.log(result.response.docs[i].name); // appends hits to the list $("#hits").append("<li class=\"hit\"><a href=\"" + result.response.docs[i].id + "\">" + result.response.docs[i].name + "</a></li>"); } $("#hits").listview("refresh"); }); }; </script> <link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header" data-role="header"> <h1>Search in Solr with jQuery Mobile</h1> </div> <div id="main" data-role="content"> <input type="text" placeholder="Input your search query" id="q" /> <input type="button" value="Search" onClick="SolrQuery($('#q').val())" /> <ul data-role="listview" data-inset="true" id="hits"> <li data-role="list-divider"><h2>Results</h2></li> </ul> </div> </body> </html>