Search functionality enabled on www.sorescu.eu
Now the site
http://www.sorescu.eu/ offers a search functionality in the left bar.
The code is relatively simple, with two components, client-side and server-side.
Notes:
- the PSP is a wrapper syntax on top of PHP;
- after loading data, the client is responsible with formatting with JQuery the result;
- in case of fast typing it is possible that multiple distinct requests to come in a different order (I shall fix it by adding a counter logic in few minutes).
ClientSide.html
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px 4px 4px 20px; position:relative">
<span class="ui-icon ui-icon-search" style="position:absolute; left:2px; top:10px"></span>
<input class='ui-corner-all ui-helper-clearfix' style='width:100%' onkeyup='showTopStories(this.value)'/>
<script>
function showTopStories(value){
$('#StoriesSearchList').load('/article/StoriesSearchList/'+encodeURIComponent(value)+' #result', function(){
$('#StoriesSearchList .dms-accordion').accordion().accordion('option','collapsible','true');
});
}
</script>
<p id='StoriesSearchList'>
</p>
</p>
ServerSide.php
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px 4px 4px 20px; position:relative">
<span class="ui-icon ui-icon-search" style="position:absolute; left:2px; top:10px"></span>
<input class='ui-corner-all ui-helper-clearfix' style='width:100%' onkeyup='showTopStories(this.value)'/>
<script>
function showTopStories(value){
$('#StoriesSearchList').load('/article/StoriesSearchList/'+encodeURIComponent(value)+' #result', function(){
$('#StoriesSearchList .dms-accordion').accordion().accordion('option','collapsible','true');
});
}
</script>
<p id='StoriesSearchList'>
</p>
</p>