Does anyone know a JavaScript package that allows to create a multi-keyword filter query like for example the searchbar of Kibana. StackOverflow, Trello and Gitlab have similar capabilities, but not all have support for multiple filters at once or don't have autocomplete for all possible search filters.
I am looking for something similar to select2 with tags, but then the predefined options are all the available filters and after selecting a filter you can enter the desired value. For instance, you enter "user:" after which you can select one of your users. This will then result in "user:John" in your search bar (and underneath it keeps track of the user id for the actual search). Next you can add another filter etc. resulting in powerfull search queries while using just one search box.
Also see this Kibana search example:
I am just wondering what already exists, before I start making this.
Related
I need to find out how to have a search bar that can find other pages on my site. Doing a google search, I can only find the code to create a search bar, and not utilise it. Its features would need to include auto correct and actually going to the page, basically these 2 things combined (https://www.w3schools.com/howto/howto_js_autocomplete.asp and https://www.w3schools.com/howto/howto_js_filter_lists.asp)
In the how to filter/search list example you can just add the urls to the corresponding links like <li>Adele</li>.
And in the how to js autocomplete example it will be a bit different and additional code needs to be written. If the url is the same as the items in the list there would not be an issue, but otherwise you need to make the array of countries into an array of objects so that each object will have the name of the country and the corresponding url. Then in the javascript function you will have to access the components as arr[x].country.
The array of countries should look something like this
`var countries = [{country:"Afghanistan", url:"afghanistan"}, {country:"Albania", url:"albania"},...}.
Then add an onClick event handler in the javascript function.
onClick="location.href=`www.example.com/${arr[x].url}`"
You can use Tipue search for that. It's easy and has many options. Like related links, search description, pagination.
It's very easy to customize, if you know how to use inspect element or javascript.
http://www.tipue.com/search/
I built an app that allows users to choose from a list of over 7,000 ingredients they already have and search for recipes that include them (using a recipe aggregator API). At first I had two search forms, a huge long multiple search scrolling list to let them choose the ingredients, which on submit populates another list, whose submit button sends the data via AJAX and outputs the recipes. I included the Chosen jQuery plugin for the first search and want to get rid of the second form entirely to make the first search output the recipes. So I'm trying to capture the data in the chosen text area, which I can then send to my javascript ajax function.
I figured out that the ingredients a user chooses using chosen is captured by this:
$('.chosen-choices').text();
"
kale chips
sugar
"
I think I could use regular expressions to get that data, but am new to them and need help with what exactly to use in order to capture multi-line multi-word data. Here's what I have so far (using ):
^\A\w(...)\s(...)
But this only captures "kale chi"
Please advise with what you think would be the best way forward.
Currently I am using Jquery Chosen Plugin in order to search the values written inside a search box and it works very well in case I want to search on the basis of the text written inside the option tag. i.e. as shown in the figure:
But what I want to achieve is search on the multiple basis i.e. on the basis of the text written inside the option tag as well as the data attributes of the option tag i.e.
For example in the above figure I may be able to search Debitors either by typing Debitors directly or by typing the data-phone's value i.e.0321-111111. I've searched the chosen plugin's documentation for the possibility to search on the basis of multiple values but, as much as I know, there wasn't any functionality provided by it.
Now what I'd like to ask is, Is there any jQuery plugin providing this multisearch functionality that you may know of?
Thanks.
Finally, I found Select2 Jquery plugin that allows the custom matcher for the searching. i.e. You can define whatever you want plugin's search to search.
i was wondering if there is a frame work or some sample code to create dynamic filters for search result to allow users build results.
i want to show user the filter they have choosen and have a small x button for them to remove the filter
like the one this site
http://www.soap.com/buy/Type=Acne+Treatments%7CBar+Soaps?s=Olay
Since you tagged this question with JavaScript, HTML and AJAX, take a look at the ajax-solr project. The Reuters demo site for ajax-solr implements this type of search filter behavior and they also walk you through how to build this with Step 5 of their tutorial.
You should look into Solr facet queries. This page should help get you started: http://searchhub.org/2009/09/02/faceted-search-with-solr/
I need help and tips on how to implement this feature.
I have a search box. A correct search query could be: Cars in Paris. {category} in {location}.
When the user starts to type the first char a search hint appears for the categories.
The user selects "Car parts" from the hint options.
"[space-key]in[space-key]" are added to the searchbox automatically after the selection of an option.
A new search hint appears for the locations. User chooses Paris.
Do the search after selection the location.
Any tips on how to implement this?
Here's what I'd suggest:
Use jquery UI for auto suggest (very easy to implement, easy to customize to work for your specific situation) http://jqueryui.com/demos/autocomplete/. What I'd suggest is to have jQuery check whether the user is typing in a category or location (by seeing if the input is empty) and based on that, run a different autocomplete call.
jQuery UI has an event called 'select'. Use that to add the chosen item + in into the text field.
Now, when the user types in something else, have jQuery recognize that it's time for a location, and call jQuery UI autocompletion to suggest locations.