I have implemented dbsight on my server. It is working fine. Just one option is missing: it is not showing me autosuggestion on the search result page like in the demo page:
http://search.dbsight.com/search.do?indexName=freedb&q=u2+beautiful+day
In my search result page it is not displaying me suggestion list.
I have found the suggest.ftl file but it's doesn't produce anything.
You can check it over here.http://filesinn.com/
search the term and I show the ajax call on the firebug console but it will not populate suggestion list.
Can any one help me out?
Thanks.
They do use the jquery.suggest.js for this I think:
http://search.dbsight.com/templates/freedb/html/resource/jquery.suggest.js
To acitvate it on your input field with id="q".
jQuery(function() {
jQuery("#q").suggest("suggest.do?indexName=freedb",
{
minchars:1
});
});
It make a query like this on keypess:
http://search.dbsight.com/suggest.do?indexName=freedb&q=u2+beautiful+d
At first I also fall in the trap of thinking that you had implemented autocomplete on your homepage. But after spending some time I realized that was not autocomplete from the server what I saw, but the browser autocomplete.
In your homepage you better add the autocomplete="off" attribute to your input field in order to disable the browser from helping the user with autocompletion from all the history of things he typed in a field named "q".
Then keep learning from the DBSight documentation:
Integration with existing systems - Step 2 Add javascripts (for you homepage only):
<script type="text/javascript" language="javascript" src="http://filesinn.com/search/search.nocache.js"></script>
<script language="javascript">
function dbsightOnLoad(){
new dbsight.Searcher().server("http://filesinn.com/dbsight")
.indexName("foxsaver")
.setup();
}
</script>
How to add/customize Suggest-As-You-Type?
var s = new dbsight.Searcher();
s.addSuggestion();
Related
i am using jquery autocomplete plugin.i defined autocomplete on a text input element.i defined many methods also on autocomplete.i can't share whole code.but giving brief idea about my scenario.here is small code snippet
j$(".quick-text-search").autocomplete({
source: function(request,response){},
search: function(){console.log('coming to search');},
});
i defined source and search method.when i type in .quick-text-search element everything is working fine and its showing list items also. but when any other element is generating search event then no list is showing.for example from element checkbox when checkbox value is changed .here is code snippet of that
$('input:checkbox').change(function(){
// j$(this).parent().addClass('active');
var catList = getSelectedValues('category-selected');
console.log("catlist");
console.log(catList);
j$(".quick-text-search").autocomplete("search", "");
});
i think it should call search method .so there should something in browser console.but there is no 'coming to search' in browser console. can anyone guideline why and how to generate search event in jquery for autocomplete??
No search will happen if the text length is less than the min options
If you go to the jQuery UI sample page: http://jqueryui.com/resources/demos/autocomplete/default.html
and you run the following into the console, nothing happens since the min length is 1.
$("#tags")
.autocomplete("search", "");
If you change it to search for "a", it will show the results
$("#tags")
.autocomplete("search", "a");
Now if we change the min length to zero and run the same code again the options open up
$("#tags")
.autocomplete("option","minLength", 0)
.autocomplete("search", "");
I am trying to use jQuery to show section if a user selects a certain checkbox in a sharepoint form. I have had success doing this with a button and with a simple checkbox with one value to show all from this blog post http://akanoongo.blogspot.com/2008/04/how-to-hide-fields-in-sharepoint-list.html, but am struggling with if they select multiple values.
<script type="text/javascript" src="/SiteAssets/Libraries/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("nobr:contains('Desk Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Calendar Refills')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Spiral Bound')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Wall Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Misc. Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Franklin Covey')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Comments')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Retention Policy')").parent('h3').parent('td').parent('tr').hide();
});
</script>
It would appear the value needs to be an if statement for contains VALUE not a click function. I am not sure what to do with this though.
$("input[title$='ShowFields']").click(function()
Basically if they select Wall Calendars it should show jsut wall calendar but if they do Wall and desk, it should toggle them both.
Any guidance would be fantastic. Thank you!
EDIT: I change my answer based on your comment below
To do what you want I'll use the library I created that is called SharepointPlus (please load jQuery and SharepointPlus in your page). Then the JavaScript code would be something like:
// hide all the rows by default
$SP().formfields("Desk Calendars,Calendar Refills,Spiral Bound,Wall Calendars,Misc. Calendars,Franklin Covey,Comments,Retention Policy").row().hide();
// add a trigger for when you click a checkbox
$SP().formfields("Calendar Type").elem().on('click', function(event) {
// the value of the checkbox is found with the "title" attribute from the parent
// if it's checked, then we show the row, if it's not then we hide it
$SP().formfields($(this).parent().attr("title")).row().toggle(this.checked)
})
I'm trying to find a resource in order to auto populate the location based on postcode provided.
e.g. When user types in 4 digits of post code, the auto complete kicks up and shows all the matched locations in format below. Postcode, Suburb, State e.g. 1234,abcSuburb,abcState.
I definately looks at jquery autocomplete at http://jqueryui.com/autocomplete/. However it appears that list only contains exact searched items. My requirement is is to get additional item_details based on item searched.
Any help will be appreciated.
You should check out Twitter's Typeahead.js.
They recently open sourced this and it's battle tested on twitter.com
I've created a KO Combo, it coudl support this.
Live example
http://jsfiddle.net/JD49k/6/
Repo
https://github.com/AndersMalmgren/Knockout.Combobox
Use Ko.bindingHandlers for create custom function like
so easy to implement and use
<input id="ainput" class="form-control" data-bind="jqAuto: actualValue, jqAutoOnChange: autoChange, jqAutoQuery: autoQuery, jqAutoSourceLabel: 'Description', jqAutoSourceInputValue: 'Name', jqAutoSourceValue: 'Id'" />
here Fiddle check out for working demo.
I am a predominantly PHP developer. I realize in this day and age specialization in one scripting language doesn't cut it, but the fact remains that my skills at JavaScript and jQuery are pretty green. I am a novice at best. I can create my own code but Cross Browser compatibility remains a huge issue with my work in JavaScript.
Anyway, I have a script that filters products according to categories/subcategories. This is how it works: you select a category and the javascript in the background does its thing to filter the subcategories so that the options displayed are the ones pertaining to the parent category- a combination of these two filters the product line.
Here is my code:
function scategories(){
//get the category option value from the category drop down bar
var cat = (document.getElementById('categories').value);
//get all the options from the subcategory drop down bar
var subcat = document.getElementsByClassName('subcategories');
var n=0;
//if the category bar option is set to 0 display everything
if(Number(cat)==0){
Show();
}
//filter the subcategories
while(subcat.item(n)){
//if there is no match b/w the subcategories option and the categories id FILTER
if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="none";
}else{
//else display the subcategory
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="list-item";
}
n++;
}
}
This code is pretty self explanatory I would say. I also have a shiftfocus function that shifts the focus from the current option selected in the subcategory to the default one which is 'none' whenever a new category is picked. This basically resets the subcategory.. here's the code:
function shiftfocus(){
document.getElementsByClassName('subcategories')
.item(0)
.removeAttribute("selected");
document.getElementsByClassName('subcategories')
.item(0)
.setAttribute("selected","selected");
}
Shiftfocus is called onChange and scategories is called onClick.
Problem 1:
1) Firefox: Shiftfocus doesn't shift the focus to the default option even though I can see it adds the 'selected' attribute.
2) Safari: Does not work at all.
EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was
creating havoc in IE. Should have double checked before bothering you
guys. Sorry. Problem 1 still persists.
Problem 2:
I understand none of us developers particularly like internet explorer. But I am willing to believe I have made a mistake here. I have some jQuery that fetches data from a script in another file via the native POST function and appends it to a table with the id "content". This works fine on every browser, except IE. If I try going back to IE 7,8 compatibility mode the results are a little better (the data shows up broken in pieces though) and in IE9 compatibility mode nothing is appended at all! Here's the code:
$.post("bagcontents.php", {
"Bid": $(this).attr('bid')
},
function(data){
$("#content").empty().append(data);
roundNumber();
$('#processorder_hidden').attr('value',currentBid);
});
//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
<form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
<table id="content">
</table>
<input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />
</form>
</div>
Any help will be appreciated. I tried outputting the fetched results with alert, alert(data), and the script is fetching everything just fine. Its the just the append part that fails :|
Here are some suggestions and hope you find them somewhat useful.
Problem: 1
Instead of having the shiftfocus() set the to a specific value, have you tried using .val('') just to clear it out. I can imagine that this will default to the first option.
Problem: 2
This will be hard to debug without knowing what data is coming back from the server. Might be bad formatting or some syntax error on the rendered output.
I am building a site and I have a list of status updates and I want to allow the users to write comments for each of of the items in the list
However I am trying to implement a UI similar to the way stack overflow works
specifically the collapsible comment form / list where a user clicks on add comment on the specific status update in the list, and below that item in the list the comment entry form shows up along with the specific comments already posted.
How do I accomplish this using Jquery?
Note: looking also for the markup example another words a working sample. Thanks
And yes if you could show Async postback that would be nice too
To load the content you can just hook up a click event to populate a div using the load method.
For example in the view you could have something like:-
<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>
<div id="commentContainer" style="display:none;">
Loading...
</div>
while the javascript to hook everything up would be:-
$(function() {
$("#commentLink").click(function() {
$("#commentContainer").toggle();
if ($("#commentContainer").is(":visible")) {
$("#commentContainer").load($(this).attr("href"));
} else {
$("#commentContainer").html("Loading..."); //Or just leave it as is...
}
return false; //Prevent default action
});
});
The quick approach (for just showing / hiding the comment area) would resemble something like this:
$(function(){
$('#id_of_element_to_use_for_click').click(function(){
$('#id_of_comment_area').slideToggle();
});
});
The jQuery site will provide you with doco on different approaches such as fades, slides or other combined animations.
Your "Comment Area" I've used in the example here would likely be a <div> tag that contains your existing comments, plus whatever textarea or text input box you wanted users to type their answers into.
Do you need to do an asynchronous postback?