Search Feature Within A Data Table

Airtable Questions General Airtable Questions
1

has anyone been able to implement a separate search feature for a data table that is not part of the webpage, or the air table controls? in my case
i really do not need or like to have all those air table controls, just need a search to find items and render the results in a nice overlay. its for a “embed” data Airtable within the website. The website’s own search will not index the air table iframe at all. (as it is understandable). the included “controls” are not compatible with any iOS device, and the aren’t really well done to begin with.
strange that air table do not have a robust search that can be included with a “table” embed, (considering it is a database after all). I am aware of the extension, that they have, but that only works within the Airtable to seek our records, while logged in. My inquiry refers to a similar search that can accompany the data table when it is “shared” using the imbed feature, to frame it within a web page.
any input or ideas? thank you all

2

Much has been written about Airtable search over the years. I asked Airtable in 2018 -

Should I spend a lot of time developing an aftermarket search system that would solve all aspects of the poorly designed Airtable search features?

They said - no, you’d be wasting your time because we will release something soon that will be mind-blowing. Fast forward a half-decade, and nothing. Now it’s too late - no one should implement search the way I described in my white paper from the previous decade.

The next (right) way is through LLMs, specifically embeddings and natural language, just as Microsoft, Google, and OpenAI have decided to advance the science of findability. This post might help you understand what I mean.

3

If you want to create your own search, you would need to write your own custom programming code for your website that taps into Airtable’s API. There is not a low-code/no-code way of doing this.

4

Probably not the best approach. Polling for changes to data that involve lots of data, is inefficient and you don’t want your search results to be latent. The right way to do this is to broadcast all data change events to an index that has a webhook listener and the ability to poke changes or new nodes into the indices in real-time.

There kinda is. Bubble supports no-code webhooks too, so this might work with my webhook design suggestion.

1 Like
5

Thank you all for the advise and replies here. I kind of knew about building a special search element separate, but though as last ditch effort to see if there is some sort of developers mode, within the airtable platform to edit the code and implement a new code within its “controls”, thus making the “search” actually work for a change and display the results in a decent format. But as I can see from many who who a ton more expertise than I do, that this simple isn’t viable, even with own custom code, and has to be built externally. that is what I am working on, although not an expert in code. sadly this (if it works :slight_smile: ) will be in the web and only the website, and cant be sort of shared on a sperate cloud account without the web site and without logging into airtable. (due to the separate css and js, unless i jumble all the code within the page instead of using links )
here is what I got so far:
the html within the body to create the form: (you can see the airtable is framed right after).

     <div class="search-container">

This is the style sheet to make the element fully editable. (size, location, colors etc…)
(still in progress)

@charset “utf-8”;
/* CSS Document */
.search-container {
background-color: #fff;
width: 70%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}

.search-container form {
display: flex;
align-items: center;
justify-content: center;
width: 70%;
}

.search-container input[type=text] {
padding: 10px;

border:#B3C7E9;
width: 80%;
font-size: 14px;
}

.search-container button {
background-color: #2196F3;
color: #fff;
border: none;
cursor: pointer;
padding: 12px 14px;
margin-left: 0px;
}

.search-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 90%;
width: 90%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
overflow: auto;
}

.search-overlay.show {
display: block;
}

/* Style the search results */
.search-overlay .search-results {
background-color: #fff;
width: 80%;
margin: 5% auto;
padding: 20px;
border-radius: 5px;
}

now the hard part. the script, that allows the search to operate, search only the EXACT shared airtable link, and render the results in a separate overlay. (not working yet, and haven’t done the results page yet).

// JavaScript Document
$(document).ready(function() {
var form = $(‘form’);
var input = form.find(‘input[type=“text”]’);
var overlay = $(‘.search-overlay’);

form.submit(function(event) {
  event.preventDefault();
  var searchTerm = input.val();
  var url = 'https://airtable.com/shrtVTBvbjvZkHm7t?q=' + encodeURIComponent(searchTerm);

  overlay.addClass('show');
  overlay.append('<div class="search-results">Loading...</div>');

  $('.search-results').load(url + ' .entry', function(responseText, textStatus, xhr) {
    if (textStatus === 'error') {
      overlay.find('.search-results').text('Error: ' + xhr.status + ' ' + xhr.statusText);
    } else {
      overlay.find('.search-results').text('');
    }
  });
});

$('.search-overlay').on('click', function(event) {
  if ($(event.target).hasClass('search-overlay')) {
    $(this).removeClass('show');
    $('.search-results').remove();
  }
});

});
this is how it will look : (only if i can get it working) LOL
thanks again

image
image1920×1080 139 KB