Search jQuery

jQuery Forum

jQuery Mobile

Tester Pi..

Passing links from JSON in listview

in jQuery Mobile • 8 years ago

Hi All,

I have been looking at the listview autocomplete demos online for local and remote data.

In the remote data demo a list of cities is loaded from remote data, but there are no links in the 'search results'. See here: http://demos.jquerymobile.com/1.4.3/listview-autocomplete-remote/

However, In the local data example the list generated contains links to the search content (see below - eg if you search audi, you can click the list item 'Audi' to be taken to audi.html).

    <
    ul
      data-role
    =
    "listview"
      data-filter
    =
    "true"
      data-filter-reveal
    =
    "true"
      data-filter-placeholder
    =
    "Search cars..."
    >

        
    <
    li
    ><
    a
      href
    =
    "acura.html"
    >Acura</
    a
    ></
    li
    >

        
    <
    li
    ><
    a
      href
    =
    "audi.html"
    >Audi</
    a
    ></
    li
    >

       ...

    </
    ul
    >

I would really like to pass links from the JSON file so that users can clicnk on the search results to be redirected to content. Can anyone help?

For example, say the JSON looked like below:

[{ "car": "Acura", "link": "acura.html" },{ "car": "Audi", "link": "audi.html" }]

How should i change the JS / HTML in order to get the links to work?


      Thanks
        very much in advance for any help anyone can give.

PS:: what does this mean? Do i have to change this is the JSON is stored on the same server/domain?

                    
    crossDomain: 
    true
    ,

Replies(8)

John Chac..

Re: Passing links from JSON in listview

8 years ago

You must be changing this part in js

html += "<li>" + val + "</li>" ;

John Chac..

Re: Passing links from JSON in listview

8 years ago

I made a sample of this here which probably suits you.

http://johnchacko.net/?p=178

Tester Pi..

Re: Re: Passing links from JSON in listview

8 years ago

Hi John,

Thanks so much for making that very useful example. I have to admit though i do not fully understand how it works. I want to make an app that will be available offline so i would prefer if the url to redirect to came straight from the JSON file (as in my post). It looks like your script looks-up the 'contact' from search.php and then gets rest of the data from the corresponding ID via detail.php (presumably from an sql database?) to generate the contacts page. This is very interesting but a bit beyond the scope of what i need which is simply to pass the URL link from the JSON file with the corresponding search term. Any chance you can post an example of how to do that?

On a separate note, i wonder is it possible to search HTML5 localstorage using listview in a way similar to your example? For example, if a user saves a 'contact' (phone, address, email) to local storage, could they could look the contact details up using listview like in your example?

Thanks again for the help.

John Chac..

Re: Passing links from JSON in listview

8 years ago

what I provided is a sample where date is from server.

same can be done with data from anywhere. JSON file in server or localstorage.

you must be changing the url accordingly and also you must be changing the code according to your JSON format.

when you using localstorage , instead of search.php you must be writing some JavaScript to search in localstorage data.

so your data (JSON ) is in a JavaScript variable? or is it in server as a file?

Tester Pi..

Re: Passing links from JSON in listview

8 years ago

Hi John,

Thanks again for the reply. So the app will be a simple contacts app. The contact list will be packaged with the app, in a local .json file (it needs to be fully available offline) - eg in app/data/contacts.json. To be honest, this is the part i am trying to get my head around at the moment: how to simply search the .json file using listview autocomplete feature, find the 'contact' by 'name', and then when the user clicks on a name in the list created, it links to the contacts .html page ('link')

The format of the JSON file is like this (contacts.json)

[{ "name": "John Smith", "link": "johnsmith.html" },{ "name": "Someone Else", "link": "someoneelse.html" }]

On a separate note: The reason i also asked about localstorage is that it would be nice if the user could also create a new contact and 'add them' to the contacts list to be searched. I cant really see a way that they could add these directly to the local contacts.json file, so the user added contact data would be stored in localstorage.

So therefore the autocomplete would really search two places for the contact data. First, the contacts.json file, but also the localstorage for any contacts added by the user.

The problem is my JS skills just arn't good enough to make it. Could you show me how to make something like this? Or point me in the right direction? As i mentioned, my priority at the moment is simply getting listview autocomplete to search contacts.json, and link to the html page corresponding to the name.

Thanks very much again for all the help.

watusiware

Re: Passing links from JSON in listview

8 years ago

JSON is a data serialization format, not a database!

It's a convenient, human-readable form for representing common data structures. It's a good way of encoding data in order to move it from A to B. It's a great way to move data between different computers/devices programmed in different languages, because it is easy to implement serializers and deserializers, and so a library for encoding/decoding JSON is available in every computer language.

If you want to "search" some data that is stored in JSON format, first read it into a variable or variables, or read the data and store it in a real database.

Fortunately, it is trivial to load an entire JSON data structure into a Javascript object. Then you can work with the Javascript object. In your case, if you decode your JSON into a variable, (JSON.parse(), $loadJSON(), etc.) you will have an array of hashes. MUCH easier to work with than the encoded JSON data!

I can't think of any good reason for serializing to JSON in order to store something in local storage. You can just store Javascript objects in local storage directly. You do not need JSON for that.