{{error}}
{{(quickSearchResults.length>10)?'10+':(quickSearchResults.length)}} {{(quickSearchResults.length==1)?'result':'results'}}
{{result.title}} {{result.timeStamp | mysql2ymd }}
I am sorry, no such article was written yet.
Search functionality enabled on www.sorescu.eu
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>