Adapting the “Best Search Box Ever”

Eric Frierson of St. Edward’s University recently wrote about his efforts to make library search boxes more responsive to users. We know that many users don’t see our search boxes as keyword search receptacles—they see them the same way they see Google search boxes: a place you just throw in a question or anything you want in order to get some results. So what does his search box do?

It defaults to  their discovery system (EBSCO Discovery Service, or EDS). But before taking the user there, a PHP script parses the search, aiming to correct for certain behavior. If a user types the name of a database, e.g. JSTOR, they might get taken directly to that database. If someone types "Sociology books," they go to a page giving them a choice ("Did you mean…") of going to a book-limited search for sociology OR a search for "sociology books" in the discovery system. If they search for "hours," they get a choice of a link to a page on library hours or a discovery search for "hours". Brilliant, right? St. Edward’s features the search box on their visually appealing library home page.

Eric was kind enough to share his PHP file, so I tried my hand at adapting it to our own context. Search for "hours" and you’ll get a link to our hours page. Our information literacy tutorial is called PILOT, so I added that. It’s terrific, since I could never have made this PHP script from scratch, but once it’s set I can adjust the variables. It’s now live on the Library at the Davis Center page. I’m also intending to incorporate into the next version of our Desire2Learn widget.

I also switched the HTML template on the "Did you mean" page to the Twitter Bootstrap framework, which I had been wanting to work with, just to figure out how the whole grid-based responsive design thing works. It’s quite easy to work with, and the result is that the elements on the page reflow nicely as the screen resolution drops.

response to search for "reserves", horizontal flow response to search for "reserves", vertical flow

One thing I really liked in the St. Edward’s search box was that it suggested questions from their LibAnswers site as the user types. As I recently posted, we decided to go with an open-source Q&A solution, so I couldn’t used Springshare’s handy API. I realized though that I could include arguments in the PHP file that would direct particular questions toward particular pages in our Q&A site—more labor-intensive to set up, but maybe worth it—if I could find a way to auto-suggest them. Twitter Bootstrap actually has a handy typeahead script that works great, but required access to the CSS, which in our CMS I simply don’t have.

So another auto-suggest that appears to be widely used comes from JQuery UI, and that one actually includes some styles in the script itself. This allowed me to do some styling even without access to the CSS.

jquery ui code

So it still looks a little awkward (and I haven’t been able to make it look uniform in different browsers), but you’ll see that if you start typing e.g. "how do i" into the search box, suggestions begin to appear.

search box with search suggestions appearing automatically

It took me a while to find a way to log search queries to a text file, but finally I hit upon a page from University of Tennessee that had some usable code. I know it’s better to save queries to a database than a flat file, but I don’t have access to a database on the server, so this will have to do.

One question that I’m reluctant to face is just how much overhead one can justify including for this. I’m using:

  • JQuery, which is not a big deal because most people will already have it cached (I use the Google-hosted version);
  • JQuery UI for the search suggestions, and I had to customize it, so I can’t use the Google-hosted version. I removed the parts that I didn’t need, and will minify it, but still;
  • Bootstrap, which is a very large CSS file to include for the very simple "did you mean?" page, though I’ve removed large parts of that too and likely can do more;
  • Another JQuery plugin to put the dummy text in the search box (can’t do without that!)
  • and then the PHP script could start to get pretty long as well…

I’m a little afraid to count up how much data is needed for this search box to be so fabulous.

But in any case, three cheers for librarians who get great ideas, have the skills and talent to execute them, and then, crucially, share their work. Again, I could never have written this script from scratch. I might add that this is exactly how I like to see universities and community colleges working together—that is to say, community colleges learning from and adapting universities’ innovations, since it’s so rare for us to have UX specialists and the like. Unequal exchange? Maybe…

[go to top]