• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 454
  • Last Modified:

Jquery UI autocomplete help

I am trying to implement autocomplete 6 times on my page, and I can do it once, but was wondering if there was a way to shorten the code somehow without copying the whole script 6 times.

My code is below... is there a way to just copy the the $( "#titles2" ).autocomplete part over and over so that it can use the same code that gets it from the xml file?
<script>
	$(function() {
	

		$.ajax({
			url: "/scripts/jqueryui/dev/demos/autocomplete/titles.xml",
			dataType: "xml",
			success: function( xmlResponse ) {
				var data = $( "titlename", xmlResponse ).map(function() {
					return {
						value: $( "title", this ).text(),
						spanishvalue: ( $.trim( $( "titlespanish", this ).text() ) || "(no translation)" ),
						id: $( "titlenameId", this ).text()
					};
				}).get();				
				
				$( "#titles2" ).autocomplete({
					source: data,
					minLength: 0,
					select: function( event, ui ){
						
				$("#ListingTitleSpanish").val(ui.item.spanishvalue);
}				

				});

			}
		});
	});
	</script>

<div style="margin-top:0.5em; font-family:Arial">
<label for="titles2"><b>Choose a title:</b> </label>
<input id="titles2" size="70" class="ui-widget" onClick="this.select()" />
</div>

Open in new window

0
monosyth
Asked:
monosyth
1 Solution
 
NeuropsykopatCommented:
you mean data will be the same ?


<script>
      $(function() {
      

            $.ajax({
                  url: "/scripts/jqueryui/dev/demos/autocomplete/titles.xml",
                  dataType: "xml",
                  success: function( xmlResponse ) {
                        var data = $( "titlename", xmlResponse ).map(function() {
                              return {
                                    value: $( "title", this ).text(),
                                    spanishvalue: ( $.trim( $( "titlespanish", this ).text() ) || "(no translation)" ),
                                    id: $( "titlenameId", this ).text()
                              };
                        }).get();                        
                        
                        $( "#titles2" ).autocomplete({
                              source: data,
                              minLength: 0,
                              select: function( event, ui ){
                                    
                        $("#ListingTitleSpanish").val(ui.item.spanishvalue);
}                        

                        });
                        $( "#titles3" ).autocomplete({
                              source: data,
                              minLength: 0,
                              select: function( event, ui ){
                                    
                        $("#ListingTitleSpanish").val(ui.item.spanishvalue);
}                        

                        });
                        $( "#titles4" ).autocomplete({
                              source: data,
                              minLength: 0,
                              select: function( event, ui ){
                                    
                        $("#ListingTitleSpanish").val(ui.item.spanishvalue);
}                        

                        });
                  }
            });
      });
      </script>

<div style="margin-top:0.5em; font-family:Arial">
<label for="titles2"><b>Choose a title:</b> </label>
<input id="titles2" size="70" class="ui-widget" onClick="this.select()" />
<input id="titles3" size="70" class="ui-widget" onClick="this.select()" />
<input id="titles4" size="70" class="ui-widget" onClick="this.select()" />
</div>

if you want different data, you will have to duplicate data function

      
                        var data = $( "titlename", xmlResponse ).map(function() {
                              return {
                                    value: $( "title", this ).text(),
                                    spanishvalue: ( $.trim( $( "titlespanish", this ).text() ) || "(no translation)" ),
                                    id: $( "titlenameId", this ).text()
                              };
                        }).get();            

                        var data2 = $( "titlename", xmlResponse ).map(function() {
                              return {
                                    value: $( "title", this ).text(),
                                    spanishvalue: ( $.trim( $( "titleenglish", this ).text() ) || "(no translation)" ),
                                    id: $( "titlenameId", this ).text()
                              };
                        }).get();      
0
 
monosythAuthor Commented:
Thanks! I just don't know how to write jquery/js. I'm great at copying and pasting and making it work and it worked just how i needed it!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now