![\"taxonomyrefiner\"](\"http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2015\/09\/taxonomyrefiner.png\")
<\/a><\/p>\nSo what if a user is searching for ‘Switzerland’? Hmmm. Well he or she could click ‘Other Value’ and type in what they are looking for. The problem\u00a0here is that the value needs to\u00a0exactly match<\/strong> the term and your user might not have a clue about the values in the termset. Countries is doable, but other labels might be harder to guess.<\/p>\n See how I typed in ‘switzer’ and SharePoint is now refining on that value. Items tagged with ‘Switzerland’ do not appear this way, our end-user is left in doubt. So\u00a0wouldn’t it be nice to have autocomplete on the textbox so the user is guided in their search? That’s exactly what we proposed to our customer and what I will detail in this blog post.<\/p>\n <\/p>\n To implement this, we’ll need to use filter display templates<\/strong> for use with the search refiners. A pretty good tutorial on how to create those by Elio Struyf is found here<\/a>, so I’m not going to go into detail on that part.<\/p>\n To start off, I made a copy of the\u00a0Filter_MultiValue<\/strong> and\u00a0Filter_MultiValue_Body<\/strong> templates. You could also pick other templates to start off with, it doesn’t really matter for the solution we’re building.<\/p>\n Next I changed the body template. By default it renders a configurable number of terms as seen above, but that’s not that useful in this case. So instead of doing that, I changed the template to render only the selected items, which are none by default. Why we want to render the selected ones you’ll see below. To do so, change the following\u00a0lines (60 – 72):<\/p>\n To:<\/p>\n By default, the template doesn’t show a textbox and you need to click ‘Other Value’ to have it appear. We don’t want that, so we’re just going to render the textbox straight away. Change lines 87 – 94 to:<\/p>\n As you can see, I added some guiding text for the user. Note that the name of the input textbox will be set to ‘RefinableString1_txtGroup<\/strong>‘, depending on the refiner you’ve configured this template for. This is exactly how the out of the box functionality would render it and the name is important because we need it\u00a0later on.<\/p>\n So now our refiner renders like this:<\/p>\n <\/p>\n Ok cool, but how about that autocomplete? Well here we will need some jQuery and jQuery UI magic. jQuery UI features an autocomplete functionality which is perfect. I first made some changes to my Custom_<\/strong>Filter_MultiValue <\/strong>template. In the <script> tag, load your jquery ui file:<\/p>\n And include the following javascript in the template to load some javascript files in the right sequence.<\/p>\n This script registers the required js files and their dependencies. Another great post by Elio has more info about that, read it here<\/a>.\u00a0Warning:<\/strong> I saw weird things happening as soon as I published the search results page I was working on. The scripts stopped working and that was due to the javascript files not loading in the right sequence. Apparently loading differs in edit mode or something, don’t know. Just make sure you’ve got the above dependencies right and it should work as expected.<\/p>\n Now the real magic is found in the CustomActions.js file:<\/p>\n There’s a couple of things going on here. The\u00a0init<\/strong> method takes care of attaching the autocomplete to the textbox. Note that the name of the control is fixed (“RefinableString1”), as is the name of the termset (“Countries”). This is because there is no direct link between the refinable string and the termset it’s values come from. Remember managed properties vs crawled properties? A refiner can be mapped to virtually any property in SharePoint, so you need to specify which termset to use somewhere, I chose this approach but agree that there might be better options out there to do this.<\/p>\n Another thing the init method does is loading the jquery-ui CSS<\/strong> file. This is required to niceely style the autocomplete box. You can load CSS files in other ways, I like this because it’s clean, simple and only loads when needed.<\/p>\n The\u00a0loadTerms<\/strong> function takes care of connecting to the sites termstore and querying the terms in the termset. It uses jQuery promises<\/strong> to wait for the load to finish.<\/p>\n The\u00a0findTerms<\/strong> function takes the set of terms and does a simple compare of the label with the string entered by our end-user. Yes, this can be optimized too cause you probably want the term query to do this and not get all of the terms over the line. Can be done, but not too relevant for the example and I didn’t bother to at this time. Performance is quite ok so I think this is not really required unless you have really huge termsets.<\/p>\n Finally, this array of term labels is passed to the\u00a0response\u00a0<\/strong>function of jQuery’s autocomplete. And voila:<\/p>\n<\/p>\nCreating custom display templates<\/h2>\n
<!--#_\r\n\tif(isSelected) {\r\n_#-->\r\n\t<input type=\"checkbox\" class=\"ms-padding0 ms-margin0 ms-verticalAlignMiddle\" id=\"_#= $htmlEncode(inputId) =#_\" name=\"_#= $htmlEncode(inputName) =#_\" data-displayValue=\"_#= $htmlEncode(filter.RefinementName) =#_\" value=\"_#= $htmlEncode(filter.RefinementToken) =#_\" checked=\"\" \/>\r\n<!--#_\r\n\t} else {\r\n_#-->\r\n\t<input type=\"checkbox\" class=\"ms-padding0 ms-margin0 ms-verticalAlignMiddle\" id=\"_#= $htmlEncode(inputId) =#_\" name=\"_#= $htmlEncode(inputName) =#_\" data-displayValue=\"_#= $htmlEncode(filter.RefinementName) =#_\" value=\"_#= $htmlEncode(filter.RefinementToken) =#_\" \/>\r\n<!--#_\r\n\t}\r\n_#-->\r\n\t<label for=\"_#= $htmlEncode(inputId) =#_\" class='_#= nameClass =#_'>\r\n\t_#= $htmlEncode(filter.RefinementName) =#_\r\n<\/pre>\n<!--#_\r\n if(isSelected) {\r\n_#-->\r\n <div id=\"Value\">\r\n <input type=\"checkbox\" class=\"ms-padding0 ms-margin0 ms-verticalAlignMiddle\" id=\"_#= $htmlEncode(inputId) =#_\" name=\"_#= $htmlEncode(inputName) =#_\" data-displayValue=\"_#= $htmlEncode(filter.RefinementName) =#_\" value=\"_#= $htmlEncode(filter.RefinementToken) =#_\" checked=\"\" \/>\r\n <label for=\"_#= $htmlEncode(inputId) =#_\" class='_#= nameClass =#_'>\r\n _#= $htmlEncode(filter.RefinementName) =#_\r\n <\/label>\r\n <\/div>\r\n<!--#_ } _#-->\r\n<\/pre>\n<div id=\"OtherValue\" class=\"ui-widget\">\r\n Type (part of) the _#= displayTitle =#_. Autocomplete will help you find the right value.\r\n <input type=\"text\" name=\"_#= $scriptEncode(propertyName) =#__txtGroup\" class=\"ms-ref-refineritem\">\r\n<\/div>\r\n<\/pre>\n
<\/a><\/p>\nHooking-up jQuery UI autocomplete<\/h2>\n
<script>\r\n$includeScript(\"\", \"~sitecollection\/_catalogs\/masterpage\/Display Templates\/Filters\/Custom_Filter_MultiValue_Body.js\");\r\n$includeScript(\"\", \"~sitecollection\/Scripts\/jquery-ui.min.js\");\r\n<\/script>\r\n<\/pre>\n
RegisterSod('sp.runtime.js', Srch.U.replaceUrlTokens(\"~sitecollection\/_layouts\/15\/sp.runtime.js\"));\r\nRegisterSod('sp.js', Srch.U.replaceUrlTokens(\"~sitecollection\/_layouts\/15\/sp.js\"));\r\nRegisterSod('sp.taxonomy.js', Srch.U.replaceUrlTokens(\"~sitecollection\/_layouts\/15\/sp.taxonomy.js\"));\r\nRegisterSod('CustomActions.js', Srch.U.replaceUrlTokens(\"~sitecollection\/Scripts\/CustomActions.js\"));\r\n\r\nRegisterSodDep('sp.js', 'sp.runtime.js');\r\nRegisterSodDep('sp.taxonomy.js', 'sp.js');\r\nRegisterSodDep('CustomActions.js', 'sp.taxonomy.js');\r\n\r\nEnsureScriptFunc('CustomActions.js', null, function () {\r\nCustom.Jsom.Refiners.init();\r\n});\r\n<\/pre>\nCustom.Jsom.Refiners = function () {\r\n\r\n\tfunction loadTerms(text, termSetName)\r\n\t{\r\n var deferred = $.Deferred();\r\n\r\n\t\tvar locale = 1033;\r\n\t\tvar clientContext = SP.ClientContext.get_current();\r\n\t\tvar taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(clientContext);\r\n\t\tvar termStore = taxonomySession.getDefaultSiteCollectionTermStore();\r\n\t\tvar termSets = termStore.getTermSetsByName(termSetName, locale);\r\n\t\tvar termSet = termSets.getByName(termSetName);\r\n\t\tvar terms = termSet.getAllTerms();\r\n\t \r\n \tclientContext.load(taxonomySession);\r\n\t\tclientContext.load(termStore);\r\n\t\tclientContext.load(termSet);\r\n\t\tclientContext.load(terms);\r\n \r\n clientContext.executeQueryAsync(\r\n Function.createDelegate(this, function () { deferred.resolve(terms); }),\r\n\t Function.createDelegate(this, function (sender, args) { deferred.reject(sender, args); })\r\n\t );\r\n\t \r\n\t return deferred.promise();\r\n\t}\r\n\t\r\n\tfunction findTerms(terms, text)\r\n\t{\r\n \tvar termEnumerator = terms.getEnumerator();\r\n\t \tvar termList = [];\r\n\t \ttext = text.toLowerCase();\r\n\t \t\r\n\t\twhile(termEnumerator.moveNext() && termList.length < 10)\r\n\t\t{\r\n\t\t\tvar currentTerm = termEnumerator.get_current();\r\n\t\t\tvar termLabel = currentTerm.get_name().toLowerCase();\r\n\t\t\t\r\n\t\t\t\/\/ if the termlabel starts with the search string; add to results list\r\n\t\t\tif (termLabel.indexOf(text) === 0)\r\n\t\t\t{\r\n\t\t\t\ttermList.push(termLabel);\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\treturn termList;\r\n\t}\r\n\r\n\tvar init = function() {\r\n\t\r\n\t $(\"input[name^='RefinableString1'\").autocomplete({\r\n\t source: function (request, response) {\r\n \t loadTerms(request, \"Countries\").done(function (terms) { response(findTerms(terms, request.term)); });\r\n\t }\r\n\t });\r\n\t \r\n\t \/\/ insert css tag to load jquery.min.ui\r\n\t var siteUrl = _spPageContextInfo.siteAbsoluteUrl;\r\n\r\n var link1 = document.createElement('link');\r\n link1.rel = 'stylesheet';\r\n link1.type = 'text\/css';\r\n link1.href = siteUrl + \"\/Style%20Library\/jquery-ui.min.css\";\r\n document.getElementsByTagName('head')[0].appendChild(link1);\r\n }\r\n \r\n return {\r\n init: init\r\n };\r\n}();\r\n\r\n<\/pre>\n