Develop Reference

Multiple filters on same page - Search, Filter, Sort

I've hit a road block. I'm trying to get these filters to
function correctly
play nice with one another so that I can sort the information on this page accordingly
The search works fine, but I'm having no luck with the filters. These are the articles I've visited, but I've had no miraculous epiphany or 'ah-ha!' moments. I feel like the ultimate Angular scrub at the moment.
Help Article 1
Help Article 2
Help Article 3
Help Article 4 - (this one came close for the checkbox filters, but the $.inArray jquery was throwing me for a loop since jquery is not included in this project)
I've been going at it for the last 5-6 hours and I'm having absolutely no luck. I need an AngularJS hero! How can I get these filters working? Any help would be greatly appreciated at this point. Code is below. Thank you!!!
jsFiddle link to my project

You can get the select list ordering working quite easily - change your ng-repeat to:
<div ng-repeat="item in inventory | filter: searchInventory | orderBy:sortOrder">
Then declare this on your $scope:
// whatever you want to be the default
$scope.sortorder = "name";
Then add this as the ng-model to your select:
<select class="form-control" name="sort" ng-model="sortOrder">
Your values on the Select List Option tags have to match the names of your names specified in the items in $scope.inventory. Use - & + for descending & ascending:
<option value="-price">Price</option>
<option value="lowInventory">Low Inventory</option> // not declared
<option value="+qty">Out of Stock</option>
<option value="-status">Inactive</option>
<option value="+status">Status</option>
Note: you will have to include own logic for Low Inventory.
See working jsfiddle here.
Checkbox filtering is a bit more advanced see here for an example.
Update: I managed to get some of the checkbox filtering working using simple ng-true-value filter.
<input type="checkbox" data-ng-model='search.status2' data-ng-true-value='inactive' data-ng-false-value=''> Inactive
<input type="checkbox" data-ng-model='search.status1' data-ng-true-value='!inactive' data-ng-false-value=''> Active
See here for updated fiddle.

Bootstrap Autocomplite plugins

I'm trying to find some Bootstrap Autocomplete plugin, to make autocomplete by cities.
For exemple I have such arrow:
{
['Alabama','USA'],
['Alaska','USA'],
['London','UK'],
['Kiev','Ukraine'],
}
and make searching by first letters of city string(country don't take).
The most nice plugin that I've found: https://twitter.github.io/typeahead.js/examples/
But in it searching goes by all entered symbols.
So:
i'm looking for autocomplete by name of city by first symbols, and shows with country;
if I wrote "Al", select box must show:
Alabama, USA
Alaska, USA
with highlited "Al".
Maybe will be good idea change arrow to strings like:
['Alabama, USA', 'Alaska, USA', 'London, UK','Kiev, Ukraine']
?

I think what you are looking for is select2 : https://select2.github.io/
You can check out the example here : https://select2.github.io/examples.html
You may also want to arrange your array to something like this:
{
['Alabama, USA'],
['Alaska, USA'],
['London, UK']
}

I have been using MagicSuggest pluggin since years. Very easy to manage, it will provides you auto suggestion and auto select too.Plenty of options are available.
Please have a look at MagicSuggest demo.
For documentation see here
Have a look on sample codes
To download please go to GitHub
As per my understanding it might help you. If you found any difficulties feel free to ask.
Thanks

Jquery Autocomplete remembers the previous selection

The requirement is to display autocomplete addresses based on the region selected. The Jquery autocomplete is called everytime the region changes. I am getting the correct autocomplete addresses based on the region. But along with the new address list, I also get the address list for previously selected regions.
To solve this problem, I used - $("#address).removeData('events').autocomplete(...)
This solves the problem. But a new problem is introduced now! The scrolling in the autocomplete list does not work properly, items are skipped on pressing down arrow key/up arrow key.
Here is the code snippet:
$("#address).removeData('events').autocomplete({
serviceUrl : 'mysource',
minChars : 2,
params : {
region : selectedRegion
},
noCache : true,
width : 350,
maxHeight : 170,
onSelect : function (value) {
...
...
}
});
Can somebody suggest me the correct approach? I am using jquey.autocomplete-min.js

If youre getting an additional appearing alongside jquery's autocomplete list, it may be an issue with your browser trying to autocomplete the input.
trying adding the autocomplete="off" attribute to the input field you're autocompleting

As mentioned in this answer the issue might not be with your code snippet but with browser http caching in general.

Well, the following worked like a charm to me
var ac = $("#address").autocomplete();
The next time, the region is changed, instead of calling autocomplete()
again, I just do this -
ac.setOptions({ params:{ region : selectedRegion}});
This updates the existing call with new region. I will no more see autocomplete suggestions for the previous selections.

Integrating Bootstrap 3 Typeahead with Bootstrap Tagsinput

I'm trying to integrate the Bootstrap 3 Typeahead plugin (basically a port from the old Bootstrap typeahead functionality before it was removed in Bootstrap 3, if I understand correctly) with the Bootstrap-Tagsinput plugin.
I have no problem getting these to work individually, including the JSON prefetch typeahead functionality. I do not understand how to integrate the two. I don't think it should be too hard but my knowledge of Javascript is apparently lacking.
Here is my input field:
<input type="text" id="tagFilter" data-provide="typeahead" data-role="tagsinput">
And here is the way the typeahead plugin is called in Javascript:
//The typeahead
$.get('tags.php', function(data){
$("#tagFilter").typeahead({ source:data });
},'json');
If it's helpful, the Tagsinput has an example in its docs explaining how to implement twitter typeahead.js:
$('input').tagsinput();
// Adding custom typeahead support using http://twitter.github.io/typeahead.js
$('input').tagsinput('input').typeahead({
prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {
this.tagsinput('add', datum.value);
this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));
But I'm using a different plugin. I found that one to be over my head.
Thanks again.

Okay...so I've actually decided on using the Twitter typeahead.js, as I managed to get it working. I used the following code, please someone point out if it's not the best way to do it.
<input type="text" id="tagFilter" data-provide="typeahead" value="test,arlington">
$('#tagFilter').tagsinput({
typeahead: {
source: $.get('tags.php')
}
});
My tags.php file is just a list, I think it will take a lot more work to get this to function with an associative array with keys in the JSON file. I decided there was no benefit to this in my case, as I'm only concerned with the tag names for query purposes.
So my tags.php is just echoing the result of:
//the mySQLi query is above...
while ($row = mysqli_fetch_assoc($result)) {
$tags[] = $row['tag_name'];
}
echo json_encode($tags);
Hope someone can benefit.

Autosuggestion is not working on my search engin

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();