Keyboard fix when using jQuery Autocomplete in Mobile Safari Browser

2010-07-25T06:02:21Z

I was implementing autocomplete functionality in a search form for a iphone app, which is a web mobile application developed using JQTouch and PhoneGap. The search functionality is for searching products in our system. When user enters characters in the search box, they see a drop down list of product suggestions and upon selecting one of the suggestion, I want to send them to the product page directly rather search results page. While implementing this functionality I encountered two problems, which I think most of the web mobile apps will need while making autocomplete for search box. Problem description, its analysis and solution are described below.

Note: I am using jQuery 1.3.2 and autocomplete plugin.

The Problem: Keyboard Toggle. To submit the form when user selects item from autocomplete dropdown, we use the return handler of autocomplete plugin. But it makes the keyword toggle before taking user to the result page. Let me explain it in detail :

User starts typeing (using mobile keyboard) and sees product suggestions.
User selects one of the options and the mobile keyboard goes off.
Next, the input focus is set which shows the mobile keyboard again.
Finally result handler is executed which takes user to the product page.

The keyboard toggle in step 2 and 3 is very irritating.

Reason: I dived into the autocomplete plugin to find the click event attached to the suggestion item, puts the selected value into input box and sets the focus to it. This focus causes the keyboard to toggle.

Solution: I carved out the click event and made it an option in the autocomplete plugin. You can either use the default behavior or write custom behaviors when user clicks on one of the suggestion items. Attached below is the diff of the modification to the plugin. You can save this patch and apply it to the autocomplete javascript file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

603,607c603,604
< $(target(event)).addClass(CLASSES.ACTIVE);
< select();
< // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
< input.focus();
< return false;
---
> var elem = $(target(event)); elem.addClass(CLASSES.ACTIVE);
> return (options.clickHandler && options.clickHandler(event, elem, input) || clickHandler(event, elem, input));
619a617,623
> function clickHandler(event, elem, input) {
> select();
> // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
> input.focus();
> return false;
> }
>

This patch adds option in autocomplete plugin by the name clickHandler. The suggested items provided by autocomplete plugin are list items(“li” tag) inside a div. The handler provides you three input params:

event: The click event.
elem: The “li” element which is clicked.
input: The input element on which we have attached the autocomplete/we want the autocomplete functionality.

Also, when you click on one of the “li” items, you might want to access the data associated with it, the string being visible in dropdown options (or the JSON data if you have fetched JSON from server). To get this data (JSON or string), one can use:

1	$.data(elem[0], "ac_data")

This returns the JSON object or the string depending upon what you have associated with list “li” item.

On suggestion click, user should be directly taken to product page: The normal behavior is to take user to search results page, but we need to direct user to product page. To implement it, I fetch the product url in autocomplete request along with suggestions using JSON dataType. The autocomplete plugin supports the JSON dataType but its not documented on the plugin page. To consume JSON data, you need to tell autocomplete the value of dataType is JSON and then exploit the parse function provided by plugin, to convert the JSON data into the format the plugin accepts. Example parse function in my case is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$('#prodinput').autocomplete("/autocomplete", {
dataType: 'json',
parse: function(response) {
//example response:
//[
// {name:"abc", url:"/show/1"},
// {{name:"def", url:"/show/2"},
// {{name:"ghi", url:"/show/3"}
//]
var parsed = [];
for (var i=0; i < response.length; i++) {
parsed[parsed.length] = {
data: response[i],
value: response[i],
result: response[i].name,
};
}
return parsed;
}
});

You need to return an array of objects, where each object should have 3 keys namely: data, value and result.

Here, is the final piece of autocomplete I used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$('#prodinput').autocomplete("/autocomplete", {
cacheLength: 0,
max: 100,
width: 290,
dataType: 'json',
selectFirst: false,
formatItem: function(item){
// Make each of the item a link
return "<a href='" + item.url + "'>" + item.name + "</a>";
},
parse: function(response) {
var parsed = [];
for (var i=0; i < response.length; i++) {
parsed[parsed.length] = {
data: response[i],
value: response[i],
result: response[i].name,
};
}
return parsed;
},
clickHandler: function(event, elem, input) {
elem.parent().parent().hide();
try {
$(input).val($.data(elem[0], "ac_data").name);
$(input).parent().submit();
} catch(e) {alert(e.message);}
return true;
}
});

Comparison of Mobile Barcode Scanners

2010-09-28T17:16:07Z

I have been assigned a task to find a barcode scanner library which works for iphone, android and blackberry and is good in performance (accuracy + speed). After searching extensively, listed are the meaningful barcode scanning software in the market followed by my analysis on them:

RedLaser (Very Famous)
Zbar
FreeBarcodeScanner (by Shopsavvy)
Zxing (used by Google Shopper App for Android)
Pic2Shop (or VisionSmarts)
QuickMark

Redlaser is the best paid barcode scanner app in the market, though expensive. Its Iphone only. They require 10% of sales if you use their library for a paid iphone application with a minimum license fee of $2500. For detailed pricing have a look at Redlaser Pricing . Our experiments say, its a very powerful and accurate barcode scanner that outperforms all the other mobile barcode scanners. Redlaser is equally accurate on both Iphone 3G & 3GS, while being super quick on 3GS because of the autofocus support. If you find a app in itunes store having awesome barcode functionality, I am almost sure it will be leveraging RedLaser technology. For development, their SDK is available at 50$ which comes with a demo scanner app that works out of box and displays the power of their technology. There is little documentation on Redlaser SDK, so you may face some difficulty adding it to your application. RedLaser recently got acquired by Ebay.

Free Barcode scanner is the best among the freely available options. It works on both Iphone & Android. Support for Windows mobile, blackberry & symbian is under active development. It was recently released by Big in Japan, makers of the shopsavvy app for Iphone & Android. It works smoothly with all versions of iphone and performs almost similar to RedLaser. It comes with a demo app to aid in development/testing. ShopSavvy has another big advantage over RedLaser, as it installs perfectly fine on the iphone 3.0 firmware. Whereas, RedLaser is only available for 3.1+.

Camera with autofocus is usually a must requirement for most of the barcode scanners in the market. Whereas, FreeBarcodeScanner is build on top of open source zxing library, which does not require autofocus camera. Android G1 did not have focus control, so zxing library from google had to innovate to allow the fixed camera lens to change focal length in software , which is really cool.

Zbar is another open source option, but only works with 3GS+ phones. Not much used and talked about.

Zxing is an open source option which only works with android. Its used by Google shoppers app for Android. The iphone port of java code only scans qrcodes and data matrixes. And, there is no active development for porting rest of the code. So not of much use to iphone development guys like us.

Pic2Shop is another paid option. It works quite well, though poorer than both Redlaser and freebarcode scanner. Works with all versions of iphone and android. Vision Smarts charges a price of $7000 USD and 10% of sale price.

QuickMark is available for iphone, android and windows mobile.

Other tried : 3G Vision’s i-nigma & barcodeapp(only works for qr and datamatrix codes). Both are pathetic, hardly scans anything.

Then there is visual product search software Snaptell, which is more of image matching software. You take a pic of book/movie box and if it matches in their database, you get the results.

Test Results

We have done experiments of Redlaser, Freebarcodescanner, Zbar and pic2shop on Iphone 3G & Iphone 3GS. Android testing results will be coming soon.

Our test sample consists of 8 barcodes on computer of various sizes & 6 real products with barcode of various sizes. For each pair of (scanner app, device), the result is number of successful scans and total time taken.

On Iphone 3G

Product	Barcodes on computer	Barcodes on real products
	match count, time taken	match count, time taken
Redlaser	5/8, 2mins	5/6, 2mins
FreeBarcodeScanner	6/8, 4mins	3/6, 2mins
Pic2shop	5/8, 3mins	–

On Iphone 3GS

Product	Barcodes on real products : match count, time taken
Redlaser	6/6, 1min
FreeBarcodeScanner	6/6, 1.5min
Zbar	3/6, 3min

Downcase Blog

Keyboard fix when using jQuery Autocomplete in Mobile Safari Browser

Comparison of Mobile Barcode Scanners

Test Results

On Iphone 3G

On Iphone 3GS