I am new to the solr scenario i have a field indexed in solr named "displayName" . Now i want to implement auto suggest in solr which should retrieve the words from this field as a suggestion how to do it?
In the solrconfig.xml change the following
Before
<searchComponent name="suggest" class="solr.SuggestComponent">
<lst name="suggester">
<str name="name">mySuggester</str>
<str name="lookupImpl">FuzzyLookupFactory</str>
<str name="dictionaryImpl">DocumentDictionaryFactory</str>
<str name="field">name_s</str>
<str name="weightField">price</str>
<str name="suggestAnalyzerFieldType">text_general</str>
<str name="buildOnStartup">false</str>
</lst>
</searchComponent>
<requestHandler name="/suggest" class="solr.SearchHandler"
startup="lazy" >
<lst name="defaults">
<str name="suggest">true</str>
<str name="suggest.count">10</str>
</lst>
<arr name="components">
<str>suggest</str>
</arr>
</requestHandler>
Try the following code in JSP
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
em{
width: auto;
height: auto;
background-color: yellow;
overflow:auto;
}
.ui-menu .ui-menu-item {
float: left;
clear: left;
}
/*
.ui-menu .ui-menu-item {
/* margin:0; */
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
*/
</style>
<script>
$(function() {
$( "#tabs" ).tabs();
$("#displayTabl").load("http://localhost:8080/Search/table.jsp" );
$("#autoname").keyup(function(){
// $("#autoname").bind('input keyup',function(){
var name = $("#autoname").val();
// alert("name"+name);
$('#results').html("");
$.ajax({
type:"GET",
url: "http://localhost:8983/solr/search/suggest",
data: "suggest=true&suggest.build=true&suggest.dictionary=mySuggester&wt=json&suggest.q="+name,
success: function (data1) {
console.log(data1);
if (data1 != null) {
var data = JSON.parse(data1);
var parentNode = data.suggest.mySuggester;
var suggestionsNode = null;
// alert("parentNode="+parentNode);
for (var key in parentNode) {
// alert("key="+key);
suggestionsNode = parentNode[key].suggestions;
if(suggestionsNode!=null)
break;
}
var autocomplete_data = [];
$.each(suggestionsNode, function (i, val) {
autocomplete_data.push(val.term);
});
// console.log(autocomplete_data);
$("#autoname").autocomplete({
source: autocomplete_data ,
select: function(event,ui){
$("#autoname").val(ui.item.label);
$.ajax({
type: "GET",
url: "http://localhost:8080/Search/search.html",
// dataType:"json",
data: "name=" + ui.item.label,
success: function(response){
console.log(response);
var txt = "";
$("#tableShow").html("");
txt+="<tr><th bgcolor=\"#996533\" width=\"250\">Record Id</th><th bgcolor=\"#996533\" width=\"250\">Exam/Non Exam</th><th bgcolor=\"#996533\" width=\"125\">Mobile</th></tr>";
var dataJ = JSON.parse(response);
var results = dataJ._results;
for(var key in results){
var globalName = results[key].name;
txt += "<tr ><td>"+results[key].id+"</td><td id="+results[key].id+">"+results[key].name+"</td><td>"+results[key].mobile+"</td></tr>";
}
if(txt != ""){
$("#tableShow").append(txt);
}
//Highlighting Starts Here
var highlight = {};
$("#tableShow tr").each(function(){
var $secondCell = $('td:eq(1)', this);
$.each(dataJ._highlighting, function(i, hitem){
if($secondCell.attr('id')==i){
$secondCell.html(hitem.name[0]);
}
});
});
//Highlighting ends here
console.log(dataJ);
// we have the response
},
error: function(e){
alert('Error here: ' + e);
}
});
}
})
}
},
error: function(result) {
alert("Error");
}
})
}); //Key Press Ends
$("#search").click(function () {
var name = $("#autoname").val();
$.ajax({
type: "GET",
url: "http://localhost:8080/Search/search.html",
// dataType:"json",
data: "name=" + name,
success: function(response){
console.log(response);
var txt = "";
$("#tableShow").html("");
txt+="<tr><th bgcolor=\"#996533\" width=\"250\">Record Id</th><th bgcolor=\"#996533\" width=\"250\">Exam/Non Exam</th><th bgcolor=\"#996533\" width=\"125\">Mobile</th></tr>";
var dataJ = JSON.parse(response);
var results = dataJ._results;
for(var key in results){
var globalName = results[key].name;
txt += "<tr ><td>"+results[key].id+"</td><td id="+results[key].id+">"+results[key].name+"</td><td>"+results[key].mobile+"</td></tr>";
}
if(txt != ""){
$("#tableShow").append(txt);
}
//Highlighting Starts Here
var highlight = {};
$("#tableShow tr").each(function(){
var $secondCell = $('td:eq(1)', this);
$.each(dataJ._highlighting, function(i, hitem){
if($secondCell.attr('id')==i){
$secondCell.html(hitem.name[0]);
}
});
});
//Highlighting ends here
console.log(dataJ);
// we have the response
},
error: function(e){
alert('Error here: ' + e);
}
});
}); //Search Click Ends
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags"> </label>
<input id="autoname">
<input type="button" name="search" id="search" value="Search" />
<div id="tabs" style="border:none;padding:0;">
<ul>
<li><a href="#tabs-1">Engagement Record</a></li>
</ul>
<div id="tabs-1">
<ol id="displayTabl"></ol>
</div>
</div>
</div>
</body>
</html>