[Show all top banners]

quicksiler
Replies to this thread:

More by quicksiler
What people are reading
Subscribers
:: Subscribe
Back to: Kurakani General Refresh page to view new replies
 help needed with javascript, ajax n jquery
[VIEWED 7020 TIMES]
SAVE! for ease of future access.
Posted on 05-29-13 1:49 PM     Reply [Subscribe]
Login in to Rate this Post:     0       ?    
 

Tech gurus i need some help. I am adding a predictive search( for products) to an  e-commerce cms website(just like in google search). Since its a cms, i am limited to use javascript only. the CMS has provided me the API which give me list of products. How can i achieve the task?

this is how I am thinking of achieving the task:
1 using Ajax get the products via api. and store to a variable( product properties: name, id, company, etc)
2.when user type something in textbox, use jquery.autocomplete property to get value from the variable.

this is how i think i am suppose to do, but i am not able to write code for it. any help is appreciated.

 
Posted on 05-29-13 2:10 PM     [Snapshot: 14]     Reply [Subscribe]
Login in to Rate this Post:     0       ?    
 

 What  exactly you need ?

Jquery plugin 

Markup

CSS 

Jquery code

if you have plugin 

$(document).ready(function() {
    
    $("#ctl00_ContentPlaceHolder1_txtSerach").autocomplete('AutoCompleteHandler.ashx');

});

Here in my case I am using asp.net handler to return the data. You can use your API

Hope it helps you.
 

 
Posted on 05-29-13 3:19 PM     [Snapshot: 59]     Reply [Subscribe]
Login in to Rate this Post:     0       ?    
 

1. looking for  codes that creates a variable which holds ajax get request (list of products from the api  (i can give u the api if needed))

2. codes for autocompletehandler


deadline aayera kei garnai aayena :(


 
Posted on 05-29-13 4:21 PM     [Snapshot: 88]     Reply [Subscribe]
Login in to Rate this Post:     0       ?    
 

Dont' know Ajax, but googled and found below
http://jqueryui.com/autocomplete/
Put your products in an array once you get it using API, and follow the code below

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>

 
Posted on 05-29-13 6:04 PM     [Snapshot: 119]     Reply [Subscribe]
Login in to Rate this Post:     0       ?    
 

To get the array of products i need to do ajax call to the api and i am stuck in ajax calls. Thru fiddler i can get into products (w properties: id name description etc) but by writing codes i am not able do so.
 
Posted on 05-29-13 6:22 PM     [Snapshot: 119]     Reply [Subscribe]
Login in to Rate this Post:     0       ?    
 

 
If i correctly understood you, this what you want to do :
 
1. You want  query your api (provided by cms) and add the response( list of products data) into a javascript variable.
2. Whenever user types something you want to do auto compelete.
 
This is just a template code, please change it as per your need.
 
As  I don't know anything about your cms api, I am assuming a lot of things here.. If i am not correct, provide more info:
 
1) Your CMS API location
 
  -- Assuming that your CMS api is a restful service that prvoides  JSON data as response. I.e. The CMS API will look like this
 
http://www.timikatiramri.com/cmsapi (this is the api location which will provide the data in an array format, again, these are assumptions, if its not the case provide more info on it)
 
- the above URL returns array data. i.e the response data would be 
 
[
"Product Name A",
"Product Name B",
"Product Name c",
"Product Name D"
]
 
 
I am assuming that you know how to use jquery ajax method and autcomplete property from jquery ui. If not then let us know.
 
<input id="products" type="text"/>
 
<script>
 
$(function(){
 
//variable to store product data
 
var myProductData = "";
 
//call the api method via ajax
$.ajax({
 
url : 'http://www.timikatiramri.com/cmsapi',
success:function(responsedata,status,xhr){
//assign the response data into a javascript variable
myProductData = responsedata;
}});
 
//now bind our input text to handle autocompelete
$('#products').autocomplete({source:myProductData });
 
});
</script>
 
 
That's all you need if you api is returning data in array format. if not then you need to modify it as per your need. As I said I don't know how data is coming from api, this is the best I Can came with. Please provide more info and we will let you know more about it.
 
HAPPY CODING :)
 
 
 

 
Posted on 05-29-13 6:47 PM     [Snapshot: 144]     Reply [Subscribe]
Login in to Rate this Post:     0       ?    
 

 I made a fiddle for you. as you type in the text box the product list will appear. however the ajax will not work ,as ajax is not allowed on cross domain model. take that as an example. here is the js fiddle link.


http://jsfiddle.net/gMf5L/3/


Good luck.

 


Please Log in! to be able to reply! If you don't have a login, please register here.

YOU CAN ALSO



IN ORDER TO POST!




Within last 365 days
Recommended Popular Threads Controvertial Threads
शीर्षक जे पनि हुन सक्छ।
डीभी परेन भने खुसि हुनु होस् ! अमेरिकामाधेरै का श्रीमती अर्कैसँग पोइला गएका छन् !
What are your first memories of when Nepal Television Began?
Sajha Poll: नेपालका सबैभन्दा आकर्षक महिला को हुन्?
ChatSansar.com Naya Nepal Chat
NRN card pros and cons?
TPS Re-registration case still pending ..
Basnet or Basnyat ??
ओच्छ्यान मुत्ने समस्या ( confession )
TPS Re-registration
निगुरो थाहा छ ??
Nas and The Bokas: Coming to a Night Club near you
Toilet paper or water?
Anybody gotten the TPS EAD extension alert notice (i797) thing? online or via post?
अमेरिकामा छोरा हराएको सूचना
Sajha Poll: Who is your favorite Nepali actress?
ढ्याउ गर्दा दसैँको खसी गनाउच
Do nepalese really need TPS?
Problems of Nepalese students in US
nrn citizenship
Nas and The Bokas: Coming to a Night Club near you
Mr. Dipak Gyawali-ji Talk is Cheap. US sends $ 200 million to Nepal every year.
TPS Update : Jajarkot earthquake
NOTE: The opinions here represent the opinions of the individual posters, and not of Sajha.com. It is not possible for sajha.com to monitor all the postings, since sajha.com merely seeks to provide a cyber location for discussing ideas and concerns related to Nepal and the Nepalis. Please send an email to admin@sajha.com using a valid email address if you want any posting to be considered for deletion. Your request will be handled on a one to one basis. Sajha.com is a service please don't abuse it. - Thanks.

Sajha.com Privacy Policy

Like us in Facebook!

↑ Back to Top
free counters