Custom Data Sorting

Custom data that is stored in URL GET encoded format can be used to sort search results. For example if documents in the index have a custom data field named 'publishDate', which holds yyyy-mm-dd formatted data, then it is possible to sort documents by oldest/newest. Other numerical (and alphanumerical) fields such as price can also be sorted.

Adding and defining a sort control

To add a sort control to the page, add a DIV with class 'sew_filterControl'.

HTML 
        <div id="sew_sortControl" style="display: inline-block">
            <!-- {"RelevanceText": "Most relevant", "Options":[ 
                    {"Label":"Preparation time (ascending)", "Field":"preparationTime", 
                                                            "Direction":"ASC", "Type":"int"},

                    {"Label":"Preparation time (descending)", "Field":"preparationTime", 
                                                            "Direction":"DES", "Type":"int"},

                    {"Label":"Recipe date (newest first)", "Field":"publishDate", 
                                                            "Direction":"DES", "Type":"date"},

                    {"Label":"Recipe date (oldest first)", "Field":"publishDate", 
                                                            "Direction":"ASC", "Type":"date"}
                ]}-->
        </div>

Inside of the DIV is a comment containing JSON formatted meta data. JSON formatting uses the same simple object notation used by Javascript, essentially; "[]" means an array, "{}" means an object, and inside of the braces appear "property name: "value".

Sort definition (properties and options)

The properties set inside of the JSON meta data control what data field the sort works and how it operates. The 'RelevanceText' property is optional and sets the text used for the default sort order (hit ranking). The table below shows possible values for each property of the Options array.

Use care not to make syntax errors when writing JSON meta data, there are various online JSON validators available

Label Field Direction Type
Option text in the dropdown The custom data field to sort results by Which direction to sort in Type of field data (case insensitive)
* * "ASC" - ascending (eg. a->z, 0->9, 1999-01-01->2014-12-31)
"DES"		 "int"
"decimal"
"date"
"string"

Example adding a sort control inside the header of the search results.

HTML 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="/Keyoti_SearchEngine_Web_Common/SearchUnit.css" rel="stylesheet" />
        <script src="/Keyoti_SearchEngine_Web_Common/SearchUnit.js"></script>
    </head>
    <body>
        <div id="sew_searchBoxControl"></div>
        <div id="sew_searchResultControl">
            <div id="sew_resultView">

                <div id="sew_resultHeader">
                    <div id="sew_headerTEMPLATE" class="sew_header">
                        Showing result page <b>${PageNumber}</b>. There are 
                        <b>${NumberOfResults}</b> results for <b>&#8220;${Query}&#8221;</b>.
                        <span id="sew_ignoredWords">The following common words were ignored: ${IgnoredWords}</span>
                    
                    
                        <div id="sew_sortControl">
                            <!--
                                {"Options":[ 
                                    {"Label":"Price (Ascending)", "Field":"price", "Direction":"ASC", "Type":"int"},
                                    {"Label":"Price (Descending)", "Field":"price", "Direction":"DES", "Type":"int"}
                                ]}
                            -->
                        </div>


                   </div>
                </div>

                <div id="sew_resultList"></div>
                <div id="sew_resultFooter"></div>
            </div>
        </div>
    </body>
</html>

In this example the default header template is appended to with the sew_sortControl DIV.

Updating results based on sort by selection changes

By default, when the user changes a selection the results will automatically update (a new search is initiated to do this). This may not be ideal user experience if searches are slower than a second or two (due to large index or busy server), or if it is preferable to let the user update all of their choices before refreshing the results. To use a button to update results use the following code:

Javascript / HTML 
    ...
        <script type="text/javascript">
            keyotiSearch.updateOnOptionChange = false;
        </script>
    ...
        <input type="button" onclick="keyotiSearch.showPage(1, true)" value="Update results" />