jQuery autocomplete from local storage

[eburlea]

Hello!

Is it possible to add autocomplete feature to input field with data loaded from local storage?

<input type="text" id="medicine" />
<script type="text/javascript">
$(document).ready(function($){
    var medicine = localStorage.getItem('medicine');
    console.log(medicine);
    $('#medicine').autocomplete({source:medicine, minLength:2});
});
</script>

I know thta 'source' requires an url, I succeded to make autocomplete with data from mysql. But this takes longer time, and I thought to load data once in local storage, then use them for autocomplete.

[iamthwee]

No, any web application should not be able to access a user's local machine, this is partly a security precaution.

Things like using java applets circumvents this, but these are rare nowadays. I'd stick to what you're doing.

[Solid_1]

Of course it's possible, jquery-ui's autocomplete doesn't require url, check the sample http://jqueryui.com/autocomplete/
It assumes source is an URL if it's a string, localStorage only stores strings so store medicine through JSON.stringify() and JSON.parse() it when loading.

@iamthwee you might want to study html5 featureset

[iamthwee]

Ah yes... sorry you are right

http://www.jstorage.info/

Looks like it has a limit on the amount you can store. I thought the OP meant direct onto the c: drive or something.

[eburlea]

Thank you for help. I finally managed to do it. Here is an example:

<input type="text" id="country" />
<script type="text/javascript">
$(document).ready(function(){
    // Creating an array with country names and load them into local storage
    var countries = new Array();
    countries = ['Afghanistan','Albania','Algeria','Andorra','Angola','Antigua and Barbuda','Argentina','Armenia','Aruba','Australia','Austria','Azerbaijan'];
    localStorage.setItem('countries',JSON.stringify(countries));
    // Adding autocmplete functionality to a textfield with data from local storage
    $('#country').autocomplete({source:JSON.parse(localStorage.getItem('countries')), minLength:1, delay:0});
});
</script>