ConverseJS Filter Contacts - javascript

I'm trying to use conversejs library to my web project and i added required js files and make it run. But what i wanted to filter contacts. Once i loaded the page filter box is showing just a moment and disappears. I couldn't find how to enable it. When i use the conversejs on conversejs.org it also has no filter box but in https://conversejs.org/tests.html there is a filter box. This is the box I'm talking about

The filter box only appears if there are more contacts than can be shown in the visible area (causing a scrollbar to appear).

Related

Userfriendly possibillity to select an icon from large iconset

I have a webapplication where a User can add a new category. The category is beeing inserted to database with form post.
This category should have an icon (bootstrap icons https://icons.getbootstrap.com/) which the User should be able to select.
I use the bootstrap framework 5.1.3 for development.
I can not find a userfriendly possibillity for selecting an item out of 1500.
I have checked using a select element with options in the form. The problem here is that the user only would be able to see the name of the icon but not the image of the icon. Bootstrap does not support adding a image to the options.
Does anyone have an idea how to implement a userfriendly possibillity to choose an icon from a large iconset where the user is able to see the icon before selecting it?
It should be able to save the name of the selected icon in database.
It would be nice if anyone could help me :).
Many thanks to all :)
I suppose you could show a modal with icons rendered with their names and adding onClick property to get the icon which is being selected by the user.
You can also add a search box at top to filter icons by text.
Kind of this: https://react-icons.github.io/react-icons/icons?name=bs

Deep linking by appending the url based on user selection

I am trying to implement deep linking in a website.
For example, I have a sample website domain.com/
I have 3 check boxes and based on that filter is happening on web page. If i check first check box, content
in web page being filtered with 1st check box values.
Now, my requirement is to update the browser url as well with domain.com/?p1=filter1
Also, If i load the new url, it should directly show me the web page with the first filter already selected and results as per first filter.
I want to implement this using javascript, jquery.
Where do I start and how to implement? Please help.

How to show multiple value in jQuery autocomplete?

I am trying to design a multi-column select/search box as the one shown below.
I thought about using jQuery-UI Autocomplete widget. I will make the list appear in focus so the user can select directly from the list or start typing in the search box to filter the data shown.
I know I can feed the Autocomplete an array of objects as the source and decide a label to be shown as the selected item when the user selects a row.
What I want is to show more than two columns on the list. Any idea how to accomplish that?
thanks,
Use autocomplete renderItem to customize your search results. For multiple column view, use html code in rendering to render table like view. And then use this library to render html in autocomplete UI.
I ended up using typeahead.js from twitter.
Paired with the bloodhound engine it gives the ability to specify costume templates for the list.

Search UI Autocomplete Input

How do I create the animation shown on http://remoteok.io where examples of possible searches are shown and when the user clicks on the search box they disappear and they can input their own query?
Twitter Typeahead.js can be used to implement similar functionality. See https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me & https://twitter.github.io/typeahead.js/

Bugs with using custom coding and Twitter's Alert plugin with Jquery

I have a filter I am using based off of Twitter's Alert, Collapse, and Modal Plugin. The conflict comes with using the Alert plugin and my custom code to get it to function how it should.
The filter functions like a sort, when clicking a selection, it creates a field (in the case of the BCN and Account filters which are my problem children) within the sort menu below its heading.
EX: Clicking on accounts pulls up a modal window from there, the user selects an account name. That name appears outside of the modal window and in the filter section below Account. The selection can be dismissed when clicking on the X beside it or dismiss all of them by clicking the reset button at the bottom.
This is where the bugs occur:
After selecting one account name, it requires a double click for each subsequent selection made. It should only require one click
When clicking on an account selection (several), dismissing it via the X, then reclicking the same option tha that was previously selected causes all dismissed
selections to appear in the filter section.
My question is how to tamper out the bugs. I am open to using another method that isn't the alert plugin so long as it works properly.
Link to the code: http://jsfiddle.net/rsxavior/ccvEw/2/

Categories