Solved

jqeury autocomplete

Posted on 2013-10-24
6
263 Views
Last Modified: 2013-11-22
I am trying to implement jquery autocomplete functionality. That part is working. However I have the image that need to displayed when the search is happening and disappear when it finished. This part does not work.
 

<label id="lblassociatedData" for="associatedData">Search on First Name Surname  </label>
<input id="associatedData"  type="text" value="" name="associatedData" >

<input class="search" type="button" value="Search">
<input class="clear" type="button" value="Clear">
<br>
<div id="loading" style="display: none;">
<img src="/includes/images/loading.gif">
Please Wait
</div>


function showLoading() {
              $("#loading").show();
      }

      function hideLoading() {
              $("#loading").hide();
      }
$('input[type="button"]:not(.clear)').click(function() {
                        
                        $('#associatedData').autocomplete('option', 'minLength', 0);
                        $('#associatedData').autocomplete('search', $('#associatedData').val());
                        showLoading();
                        
                        
                        return false;
                  })
                  
                  $(".clear").click(function() {
                        $("#associatedData").val('');
                        $("#bodyID").val('');
                        $(".search").show();
                  })
            }).change();

$("#associatedData").autocomplete({
                        source: function(request, response){
                        //showLoading();
                        //$("#loading").show();
                              $.ajax({
                                    url: "index.cfm",
                                    dataType: "json",
                                    cache: false,
                                    async:false,
                                    success: function(data){
                                          //alert('hello');
                                          //alert(data);
                                          hideLoading();
                                          response($.map(data.data, function(item){
                                                return {
                                                      label: item.descriptor + ((item.seconddescriptor != "") ? " (" + item.seconddescriptor + ")" : ""),
                                                      value: item.descriptor,
                                                      saveBodyID: item.bodyid
                                                }
                                                
                                          }));
                                          hideLoading();
                                    }
                              });
                        },
                        minLength: 1000,
                        close: function(event, ui) {
                                    $('#associatedData').autocomplete('option', 'minLength', 1000);
                                    hideLoading();
                        },
                         open: function(event, ui) {
                              hideLoading();
                         },
                         
                         search: function(event, ui) {
                              // $('#loading').show();
                               hideLoading();
                           },
                                                            
                        select: function(event, ui){
                              this.value = ui.item.label;
                              hideLoading();
                              $('#bodyID').val(ui.item.saveBodyID);
                              var val = $("#bodyID").val().length;
                              
                        }
                  });
0
Comment
Question by:erikTsomik
  • 4
  • 2
6 Comments
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
is anybody have any suggestions
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
Comment Utility
something is missing, there is no "{)" for this:
}).change();

Change this: <img src="/includes/images/loading.gif">
to: <img src="includes/images/loading.gif">

I made some changes to your code (see below). Since I don't have your source, I just used Geonames (try searching for any city) to illustrate. Hopefully this is what you want.
<!DOCTYPE html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body>
	<label id="lblassociatedData" for="associatedData">Search on First Name Surname  </label>
	<input id="associatedData"  type="text" value="" name="associatedData" >
	<input id="btnSearch" class="search" type="button" value="Search">
	<input id="btnClear" class="clear" type="button" value="Clear">
	<br>
	<div id="loading" style="display: none; position:absolute; top:200px;">
		<img src="includes/images/loading.gif">	Please Wait
	</div>

	<script type="text/javascript">
	function showLoading() {
			$("#loading").show();
			$("#ui-id-1").hide();
		}

	function hideLoading() {
			$("#loading").hide();
		}
		  
	$('#btnSearch').click(function() {
							
							$('#associatedData').autocomplete('option', 'minLength', 0);
							$('#associatedData').autocomplete('search', $('#associatedData').val());
							//showLoading();							
							//return false;
					  })
					  
	$("#btnClear").click(function() {
		$('#associatedData').autocomplete('option', 'minLength', 1000);
		$("#ui-id-1").hide();
		//$("#associatedData").val('');
		//$("#bodyID").val('');
		//$(".search").show();
	})
				//}).change();

	
	 
	$("#associatedData").autocomplete({
		
		source: function(request, response){
								showLoading();							
								$.ajax({
										//url: "index.cfm",
										url: "http://ws.geonames.org/searchJSON",
										dataType: "jsonp",
										 data: {
											featureClass: "P",
											style: "full",
											maxRows: 12,
											name_startsWith: request.term
											},
										cache: false,
										async:false,
										success: function(data){
											hideLoading();
											/*
											response($.map(data.data, function(item){
													return {
														  label: item.descriptor + ((item.seconddescriptor != "") ? " (" + item.seconddescriptor + ")" : ""),
														  value: item.descriptor,
														  saveBodyID: item.bodyid
													}
													
											  }));
											*/
											response( $.map( data.geonames, function( item ) {
													return {
													label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
													value: item.name
													}
													}));
											$('#associatedData').autocomplete('option', 'minLength', 1000);
											hideLoading();
											
										}
								  });
							},
		minLength: 1000,
							//source: getFruit(),
							/*
							
							close: function(event, ui) {
										$('#associatedData').autocomplete('option', 'minLength', 1000);
										hideLoading();
							},
							 open: function(event, ui) {
								  //hideLoading();
								  showLoading();
							 },
							 
							 search: function(event, ui) {
								  // $('#loading').show();
								   hideLoading();
							   },
							*/									
		select: function(event, ui){		
					this.value = ui.item.label;
					$("#ui-id-1").hide();
					//hideLoading();
					//$('#bodyID').val(ui.item.saveBodyID);
					//var val = $("#bodyID").val().length;								  
				}
	}); 
					  
	
	</script>
</body>
</html>

Open in new window

0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
thank you PierreC your sample works just fine in Firefox. However, it does not work in Google Chrome
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
and also the spinner does not show up in IE 10 browser
0
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 500 total points
Comment Utility
remove this:
async:false,

I tested under Chrome 28, Firefox 23 and IE 10. Works fine in all of them.
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
if I remove async:false, i get the spinner back but I also get unexpected query return to my autocomplete meaning I get duplicates
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now