tag:blogger.com,1999:blog-37403350244417708142024-03-05T08:27:03.710-08:002cThis will essentially be a blog about 3 things: motorcycles, programming and hobbies. If you have anything in common with any of these, you're welcome to my 2 cents.Slavichttp://www.blogger.com/profile/02689561078916807218noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-3740335024441770814.post-46776792120975060732010-05-25T13:52:00.000-07:002010-05-25T14:17:59.074-07:00JQuery Autocomplete - How to Create Your Own Callbacks for Selecting Options<p>This here is a post for the hackers out there. <br />
It involves dealing with the JQuery plugin: Autocomplete (http://docs.jquery.com/Plugins/Autocomplete).<br />
</p><p>I have been struggling these days over a problem that I think many might have. <br />
The standard Autocomplete as of now can only suggest options and when you select one of those options it <br />
gets written in your input that triggered the autocomplete. It works for most of the cases but at times you <br />
may want that when you select that option multiple inputs to be affected like in this example:<br />
</p><br />
<p>Say that we have these inputs: [address], [city], [state], [zip]<br /><br />
Typing something in the [address] input would give you a list of <br />
addresses and you select for example on of those: <br />
"123 mayham ave, New Los Angeles, 90000". Now you might want <br />
that parts of this address string go into different inputs like <br />
"123 mayham ave" to [address], "New Los Angeles" to [city], "90000" to [zip] etc. <br />
Currently with JQuery Autocomplete this is not really possible.</p><p>Here's how I solved this problem: <br />
</p><h4>Step 1</h4>I had to alter a single line of code in the autocomplete.js file (the main plugin file for autocomplete). That line was just plainly replacing the input's value with whatever the selector's value was.<br />
In the function selectCurrent() i changed the line <br />
<div style="background-color:#def; color: #363; padding:8px; font-family: 'courier new',monospace; font-size:1.2em; overflow: auto;"><pre>$input.val(v);
</pre></div>to <br />
<div style="background-color:#def; color: #363; padding:8px; font-family: 'courier new',monospace; font-size:1.2em; overflow: auto;"><pre>options.selectOptionHandler && options.selectOptionHandler(selected) || $input.val(v);
</pre></div>this ensures that if you have a callback function named selectOptionHandler in the options parameter it will use that function istead of changing the input's value. This way you can change whatever you want in your callback using the supplied argument (selected) which is the selectedOption object.<br />
<h4>Step 2</h4>Next i declared my custom callback in the options like this:<br />
<br />
<div style="background-color:#def; color: #363; padding:8px; font-family: 'courier new',monospace; font-size:1.2em; overflow: auto;"><pre>$('#clinfo-'+addressFields[fx]).autocomplete("./?v=ajax&a=autocomplete_async", {
cacheLength: 1,
matchContains: true,
selectFirst:false,
dataType: "json",
//this function parses the data supplied by the server side (in case it's a json string)
parse: function(data) {
var array = new Array();
if(data.matches){
for(var i=0;i<data.matches.length;i++){
array[array.length] = { data: data.matches[i], value: data.matches[i]["cl_"+data.field], result: data.matches[i]["cl_"+data.field] };
}
}
return array;
},
formatItem: autocompleteFormatAddress,
// this is the callback function im talking about
selectOptionHandler: function(selectItem){
$("#clinfo-street").val(selectItem.data.cl_street);
$("#clinfo-city").val(selectItem.data.cl_city);
$("#clinfo-zip").val(selectItem.data.cl_zip);
$("#clinfo-state").val(selectItem.data.cl_state);
},
extraParams:{
"field":addressFields[fx],
client: function(){ return $("#clinfo-client").val()}
}
});
</pre></div><p>Of course, I am supplying the values from the server as a json array with rows <br />
containing the values for street, city, state etc.<br />
</p><p>If you find this thing helpful let me know or perhaps also tell me if you don't find it so I can explain better.<br /><br />
Write me here if you need the modified version of the autocomplete.js file.</p><br />
Best of luck!Slavichttp://www.blogger.com/profile/02689561078916807218noreply@blogger.com0tag:blogger.com,1999:blog-3740335024441770814.post-87233023037583743062010-01-11T14:33:00.000-08:002010-01-11T14:34:53.315-08:00Love at First Throttle<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzs2Kgaa2Ge1UwoWARq-TDGWoF5IAHBGl5n42fJe77Z-3i_wS6u7KMCJFISmVbmrHovHtES24BbkuH8SySB9EFGhNlJjTgPkYKcHcJqLCmu6UdrQ4JRi98qiB1F4K1dNrS0VIS0tMEhw/s1600-h/IMG_5003.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzs2Kgaa2Ge1UwoWARq-TDGWoF5IAHBGl5n42fJe77Z-3i_wS6u7KMCJFISmVbmrHovHtES24BbkuH8SySB9EFGhNlJjTgPkYKcHcJqLCmu6UdrQ4JRi98qiB1F4K1dNrS0VIS0tMEhw/s400/IMG_5003.JPG" /></a><br />
</div><span style="font-family: 'Trebuchet MS', sans-serif;">Ladies and Gentlemen, I present you my new girlfriend.. (I have two, but since one of them talks on the phone right now, I'll speak about the green one)</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">Where was I? Yes, right - so this is my new girlfriend - the Ninja 250R. I acquired it 6 hours ago and we already managed to have some really hot moments together (So hot that the needle from the temp-gauge was hanging in between). </span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">This baby's purpose was to replace my earlier Honda CBR 125R which served me well for almost 2 months. Which it will do, I think with excellence. It's got the looks of its bigger brother Z6 and from 5 meters you could even take it for a Z6 if you see it frontally.</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">The European edition has no choke which means that the intake is somehow digitally adjusted which is just great. Not that I am against the old-style choke things, but its place isn't on a sport bike like this one.</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">Amazing sound of the engine for this low displacement bike, great push and very high-rev loving.</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">I feel like this affair will last more than a couple of weeks. </span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">-----------------------------------------------------------------</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">SPECIFICATIONS</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">Engine: 249cc, inline twin cylinder, around 30 HP </span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">Weight: 150kg (dry, add some 20 kg for the liquids) </span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span>Slavichttp://www.blogger.com/profile/02689561078916807218noreply@blogger.com0