Perch Search with Typeahead

If you're using a JS library like Typeahead, you'll want all of the relevant data available on the front-end when the page loads. Pull your data out as JSON using Perch/PHP or a custom Perch template, feed it to Typeahead, and you should be good to go.

I did something similar here but fed data to Angular for in-page search/filters instead of Typeahead: https://foundationcapital.com/ideas/

Hey guys,

Thanks for the replies. As of right now I have a Search bar using perch_search_form which works on submit. I have Typeahead.js included on the page but am not sure how to pull in my JSON data.

It looks like the data I need is stored in the table: perch2_collection_items with the appropriate data under the column "itemJSON" which is formatted as follows: {"_id":"2","heading":"Tommy Biglow","_title":"Tomm..

Just trying to get this to connect w/ Typahead.js

Any advice appreciated!

Thanks Rachel,

Once I have typeahead working and I'm ready to pull in the data from perch is there an easy way to get it into JSON for the page to use?

Thanks

Sorry to bother but are there instructions / documentation on formatting perch data as JSON?

I'm testing here: https://stp.biglow.co/admin/templates/pages/artist-json.php

You can use PerchUtil::json_safe_encode() in your PHP. But I am not sure this is the final solution. Just my 2 cents. :)

https://docs.grabaperch.com/docs/templates/attributes/jsonencode/

Hope this helps.

Thanks Robert,

I feel like json_safe_encode is already being applied b/c in the perch2_collection_items table there is a column called itemJSON that contains clean JSON for each entry.

Currently I have the test page connecting to the DB and selecting itemJSON from perch2_collection_item but am having trouble formatting that result as JSON (or getting the result to print in any format for that matter).

I'm probably missing something simple.... Still grinding on this, let me know if you have any more feedback! Thanks again!

There is also PerchUtil::json_safe_decode() which produces an array of the json. I don't completely know what your doing so I'm not sure I have the answers.

R. K

Stuck trying to pull in JSON to a page for typeahead.js to use, here's what I have right now: https://stp.biglow.co/admin/templates/pages/artist-json.php

Not very pretty... Definitely doing something wrong.

Thanks for the support guys.

Create a new Perch template that only has the fields you want to pass to Typeahead, and format it as valid JSON. It could look something like this:

<perch:before>
[
</perch:before>
  {
    "someKey": "<perch:content id="title" type="text" jsonencode="true" />",
    "anotherKey": "<perch:content id="image" type="image" jsonencode="true" />"
  },
<perch:before>
]
</perch:before>

Thanks Brad,

Does this solution require the re-entering of all names? Typeahead just needs to get the first name and last name of all of the contacts entered into a Collection.

Any way to tie the JSON template together with the Collection items so each time a CMS user adds a new name it is entered into the JSON template as well?

Hi Drew, I've posted the code from /templates/pages/artists-json.php below! This is what I'm using to retrieve that unescaped JSON

 <?php

$db=mysql_connect('myhost', 'dbuser', 'dbpassword') or die('Could not connect');
mysql_select_db('dbname', $db) or die('');

$result = mysql_query("SELECT itemJSON from perch2_collection_items") or die('Could not query');

if(mysql_num_rows($result)){
    echo '{"testData":[';

    $first = true;
    $row=mysql_fetch_assoc($result);
    while($row=mysql_fetch_row($result)){
        //  cast results to specific data types

        if($first) {
            $first = false;
        } else {
            echo ',';
        }
        echo json_encode($row);
    }
    echo ']}';
} else {
    echo '[]';
}

mysql_close($db);
?>

D'oh! Thanks Drew. Working on other output methods right now but I think I'm getting too much data back when all I really need is first name, last name. I'm also getting a lot of duplicates. Probably pulling from the wrong table... The search continues!