Solved

jqeury autocomplete

Posted on 2013-10-24
6
270 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
ID: 39598986
is anybody have any suggestions
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39599597
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
ID: 39601313
thank you PierreC your sample works just fine in Firefox. However, it does not work in Google Chrome
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 19

Author Comment

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

Accepted Solution

by:
Pierre Cornelius earned 500 total points
ID: 39604869
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
ID: 39670871
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…

860 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