Forum

Thread tagged as: Question, Runway, Forms

Perch Search with Typeahead

Hey All,

I'm attempting to setup a Perch Search with Typeahead / Autocomplete in Perch Runway. The data I'm using is stored in a Collection and all I really want is the first name, last name to be searched, on selection of a name, relevant information stored in the Collection Item will be displayed in a fancybox type frame.

Wondering if anyone has gotten anything like this up and running before.

Some diagnostic info below.

Thanks for reading! T

Perch Runway: 2.8.3, PHP: 5.5.22, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 15d5c781cfcad91193dceae1d2cdd127674ddb3e $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.3), assets (2.8.3), categories (2.8.3), collection_1 (2.8.3)
App runtimes: <?php $apps_list = array( 'content', 'categories', );
PERCH_LOGINPATH: /admin
PERCH_PATH: /homepages/46/d374498725/htdocs/dev/stp/admin
PERCH_CORE: /homepages/46/d374498725/htdocs/dev/stp/admin/core
PERCH_RESFILEPATH: /homepages/46/d374498725/htdocs/dev/stp/admin/resources
Image manipulation: GD
PHP limits: Max upload 40M, Max POST 8M, Memory: 120M, Total max file upload: 8M
Resource folder writeable: Yes
HTTP_HOST: stp.biglow.co
DOCUMENT_ROOT: /kunden/homepages/46/d374498725/htdocs/dev/stp
REQUEST_URI: /admin/core/settings/diagnostics/
SCRIPT_NAME: /admin/core/settings/diagnostics/index.php
Tommy Biglow

Tommy Biglow 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

What does your solution look like so far?

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!

Rachel Andrew

Rachel Andrew 394 points
Perch Support

You would create a Perch template as normal but instead of enclosing the Perch Template tags that write out the content with HTML tags, you use your json instead. It's one of the benefits of our approach to templating that you can output any text format you like.

I would get typeahead working with some dummy data just hardcoded first and then replace that with the dynamic data from a template.

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

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Yes, create a Perch template that formats you data as json. It's just a text file.

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. :)

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

Drew McLellan

Drew McLellan 2638 points
Perch Support

What do you have so far and how is it failing?

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?

Drew McLellan

Drew McLellan 2638 points
Perch Support

The issue with the above JSON is that it's still escaped. How are you retrieving it?

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);
?>
Drew McLellan

Drew McLellan 2638 points
Perch Support

You're calling json_encode() on the result, but it's already JSON encoded.

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!

Rachel Andrew

Rachel Andrew 394 points
Perch Support

You don't need to pull direct from any table, you just need to make a regular Perch Template, as Brad explained, which outputs what you want as json. Then pass that into your perch_collection function.

I don't understand why you are connecting to the database directly to do this, as Perch does all of this for you. It's pretty much the same as how the Blog generates the RSS feed, except that is xml we are creating not json.

https://docs.grabaperch.com/video/v/create-a-blog-rss-feed/