Any ideas how to add spinner when search is in progress?

[Deleted user]

Hi.
Any ideas how to add spinner when search is in progress?

[mehmetalidumlu]

Hi @PrestaShark ,
You can use following codes

<div id="search-box-container">
	<div class="search-box" id="SBox" style="left: 49px;">
		<input id="free-text-search" name="q" autofocus="" type="text" placeholder="Search..." autocomplete="off">
		<a class="also setting">
			<i id="text-search-loader" class="fa fa-search"></i>
		</a>
	</div>
</div>

$('#free-text-search').autoComplete({
   minChars: 3,
   delay: 1000,
   cache: false,
   source: function (term, response) {
   	$('#text-search-loader').removeClass('fa-search');
   	$('#text-search-loader').addClass('fa-spinner fa-pulse fa-fw');

   	$.ajax({
   		url: "demo_test.txt", success: function (result) {
   			$('#text-search-loader').removeClass('fa-spinner fa-pulse fa-fw');
   			$('#text-search-loader').addClass('fa-search');
   		}, error: function () {
   			$('#text-search-loader').removeClass('fa-spinner fa-pulse fa-fw');
   			$('#text-search-loader').addClass('fa-search');
   		}
   	});

   },
   renderItem: function (item, search) {
   	return 'Your render item';
   },
   onSelect: function (e, term, item) {

   }
});

You must add FontAwesome 4.7 icon pack your project.
Good luck with

[Deleted user]

Perfect!