Gravatar for jschjolberg@awareweb.com

Question by jschjolberg, May 6, 2014 4:00 PM

How can you use custom search fields with the JavaScript Search Framework?

Instead of using the QueryBox, SearchBox and OmniBox components, is it possible to use standard HTML input fields and use those values to build a custom query? For instance, I'd like to have a date range search. So I would have a from date input and a to date input. How would one go about taking the values of these two inputs and creating and running a new search query using the JavaScript Search Framework?

Thank you!

2 Replies
Gravatar for olamothe@coveo.com

Answer by olamothe, May 6, 2014 4:17 PM

To give a more general answer to your question, the framework (and all the basic component we provide) use a set of documented events. So, our library of component just hook themselves on the correct events and add stuff to the outgoing query. For example, the omnibox just listen to right event (buildingQuery) and push it's content to the outgoing query expression.
Events doc
You can hook your own code to these events (for example)

$("#MySearch").on("buildingQuery", function(e, args) {...} )

The args that each events will send are different, and documented. In your case, the building query event would probably be what you want. The args parameter will be an object that contains a
Query Builder

You can use this to do something like this :

args.queryBuilder.expression.add("@sysdate>="  + $("#myFromInput").val())
args.queryBuilder.expression.add("@sysdate<="  + $("#myToInput").val())
Gravatar for glaporte@coveo.com

Answer by Gregory Laporte, May 6, 2014 4:03 PM

Yes, this is possible using the buildingQuery event from the JsSearch Framework.

You can add the following to your script:

$('.CoveoSearchInterface').on('buildingQuery', function(e, args) {
   var valueToSearchFor = $('#myInputId').val();
   args.queryBuilder.advancedExpression.add(valueToSearchFor); 
 }); 

This will add the content of your input to the advanced expression. See this page for more information on events: https://developers.coveo.com/display/JsSearch/Events

Gravatar for mlaporte@coveo.com

Comment by Martin Laporte, May 6, 2014 4:15 PM

Something I'd like to add: you can build a more complex query expression based on the value of your input, for example …add('@somefield==' + valueToSearchFor). This works with date values as well, as long as you're correctly encoding the dates in the proper format.

Gravatar for jschjolberg@awareweb.com

Comment by jschjolberg, May 6, 2014 4:39 PM

Thank you - this helps a lot. Do you know if there are any good examples of how to write expressions? The documentation shows this:

add expressionBuilder.add(expression:string) Adds an expression to the ExpressionBuilder. expression : The expression to add.

How do you write the expression if, for instance, you want $('#myInputId").val() to be searched on as a keyword?

Gravatar for olamothe@coveo.com

Comment by olamothe, May 6, 2014 4:44 PM

I would direct you here to learn about the basics of the Coveo query language: http://onlinehelp.coveo.com/en/ces/7.0/user/basic_search.htm

More precisely, in your case : http://onlinehelp.coveo.com/en/CES/7.0/User/SearchQueryExamples.htm The field query example

Gravatar for jschjolberg@awareweb.com

Comment by jschjolberg, May 6, 2014 4:56 PM

Very helpful - thank you!

Ask a question