Create an ASync Searchable input with templating - reactjs

I'm trying to create an async search box with templating possibilities in order to create something similar as the search box on Microsoft's website, i.e. with a picture, title and subtitle for each item.
I'm using PrimeReact library with an component, but it seems too limited. So I checked other components (https://react-select.com/home, https://www.algolia.com/), but was not able to find something similar.
Does someone have a suggestion to create such a search box?
Thank you!

Related

How to show/hide layers in Mapbox on the client

I'm working on a web app with Nextjs, Mapbox and react-map-gl. On the client side I would add some controls to show/hide specific POIs, for example restaurants, museums and landmarks.
I tried various ways and found multiple examples that were not specific to my problem. Nevertheless I'll note them down here, so you can see what I tried and why it failed.
Change the categories in Mapbox studio
There is a possibility to show/hide the POI categories in Mapbox studio, however this is static and I want to make this sort of changes on the client side.
Two examples from from Mapbox
"Filter symbols by toggling a list"
"show and hide layers"
Those examples show very well what I want to achieve. Simple UI buttons where I can show/hide certain POI categories, for example Theatre, Museum, Bar, Bicycle.
The downside is that the data is added manually - after that map is loaded. I'm looking for a way to show/hide the POI categories on the existing map data I receive from Mapbox.
Copy POI layer
I found a third option that suggest to copy the POI layers "Hide mapbox POI in runtime". It doesn't seem like a proper solution, but I'll give it a try and share my feedback afterwards.
Do you guys know how I can properly show/hide categories at runtime from the POI-Layer in Mapbox?
I'm thankful for any help.
You can use the same approach shown in the "show and hide layers" example you linked to. Once you have a layer on the map for each POI group you want to control, use map.setLayoutProperty(layername, 'visibility', 'none') to hide, and map.setLayoutProperty(layername, 'visibility', 'visible') to show.
Layers added after the map loads are no different than the layers that are included with the main style. The "show and hide layers" example shows sources and layers added after the map loads, they are just coming from mapbox-hosted vector tiles, not geojson files.
Thanks chriswhong. For anyone working with react-map-gl, there is one more thing to consider.
The setLayoutProperty is at the time of my writing not available on mapRef and on the useMap hook.
According to the create-ref.ts file from react-map-gl the setLayoutProperty is part of the methods that may break the react binding if called directly.
According to the official react-map-gl documentation you can you can still access the hidden members via getMap(), as it can be seen in the following example via console log.
codesandbox.io/s/zealous-poincare-ti5qx9

LWC :how can i display the list of Objects in a drop down list and when we select an objects it should display it fields

Lightning web Components to display list of Objects in a drown list. and display fields of selected objects
this is possible using getGlobalDescribe in Apex side and then getObjectInfo on the javascript side.
If you need something already working, you can have a look at the AppExchange market and try to find a solution there.
If you need a development, I suggest to find a developer or hope that someone will have time to give you that for free but this website is more about questions/issues that we try to solve.

Best way to implement custom search form

Firstly, I am a Drupal newbie and am still alien to many of Drupal's core concepts. My questions probably seem lame but .... I am trying my best.
I want to implement a custom search form like in the picture attached.
Hotel, flight, etc. are taxonomy terms.
Depending on the taxonomy term selected, the parameters below will also change, like in the picture below:
I came across Drupal Search API. I saw the Munich DrupalCon screencast on search api.
http://www.youtube.com/watch?v=rArRwp_1h8Q
From what I have seen so far, I am not sure whether this can be implemented using Search API.
I know this can be implemted using Forms API (I will create the form manually).
I want to know which way will be faster, Forms API or Search API.
I am using : Drupal 7.26
A simple way is to build a regular view with exposed filters.
To add and configure a views exposed filter:
Go to your views edit page.
Create the filter criteria that we want our users to be able to control, by clicking the "Add" button, in the filter criteria box.
Choose the fields that you want your users to be able to filter through them and click "Add".
In Configure filter criterion, check the option Expose this filter to visitors, to allow them to change it.
Configure the rest of the settings to your liking and click "Next".
After saving the view, this filter should be exposed to your users and they are able to search your view.
For a demo with screenshots; Check this tutorial.

Best Way to Create Image Gallery

Please provide any examples or links which clearly explaining to create simple image gallery in Drupal 7.
Actually the image gallery should be in Thumb Nail Image with 4 images per row.
It should be categorized with simple menu.
If there is sub category, then there should be drop down menus.
Finally the gallery should be with pagination links.
I've tried with taxamony, but it not clear display as expected in front end.
Please provide the better way either thru code or any modules available.
There are different ways to do an image gallery. If something like galleria is what you are looking for you can do it very easily just by using an image field and drupal galleria module.
But in your case, you will have to use views. In that pull out the images you want, choose the
display as grid. Set the no. of columns to 4. Link to the original image. Then you can use the
Lightbox module to open them in a lightbox, if you want one.
For pagination you can use the default views pagination settings.
This might help you. Check out.

Bing/Google Search or URL suggestion feature , implement search provider

I'm trying to make edit box which can provide URL/Search keyword suggestion when use type it. Do you guys have any idea where should I start ? I've review the BING API but I couldn't find it...
For your edit box I'd recommend using the AutoCompleteBox from the toolkit.
Google has a custom serch API which may be a good place to start looking for a data source for your searches.

Resources