Serhioromano / cobalt-9

Cobalt 9 Beta Test Group
11 stars 2 forks source link

Search Enhancement - Search History #158

Open kiranetph opened 5 years ago

kiranetph commented 5 years ago

An optional search history (with a clear function) would be a nice addition. image

The search history should be personalized and work like an incremental search.

Serhioromano commented 5 years ago

an incremental search? What is that?

kiranetph commented 5 years ago

https://en.wikipedia.org/wiki/Incremental_search like a "typeahead" search, see https://twitter.github.io/typeahead.js/examples/

KEZEO commented 5 years ago

I can remember universal Ajax live search did an integration with cobalt cck but it did not work very well. Maybe you could continue this integration? Thank you.

kiranetph commented 5 years ago

I think you are referring to OFFLAJN http://offlajn.com/universal-ajax-live-search/universal-ajax-live-search/flypage.tpl.html It is somehow working, but needs definitely some improvement/ I had some discussion in 2017 with the developers, but since there was no demand for it, they did not really implement a full integration.

For the image it was actually never really implemented.

Also the %LIKE ... % search is not really effective with bigger data sets. etc etc ...

But this is a different topic/request. It is about a personalized "Search History".

Serhioromano commented 5 years ago

How to combine incremental search and search history?

kiranetph commented 5 years ago

saving the personalized search history either in cookies or the database. Now there are several approaches to it. If focus is on the search field, a dropdown will show with the history (maybe last 10 options) and it can be clicked. example is https://www.lazada.com.ph

If Search history AND incremental search is activated, a JS can narrow down the selection .. example:

function incSearch() {
  var input, filter, list, li, a, i, txtValue;
  input = document.getElementById("buttonSearch");
  filter = input.value.toUpperCase();
  list = document.getElementById("searchList");
  li = list.getElementsByClassName("pull-left");
  for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
      } else {
          li[i].style.display = "none";
      }
  }
}

If "search history" AND "AJAX search" is activated, it will just show the dropdown when focus on the search field and user can only click on the history. But when he starts to search, AJAX search (type-ahead) will take over.

Serhioromano commented 5 years ago

I think the best way to use LocalStorage for search history. It is supported by all browsers nowadays.

That makes sense, show search history on focus and suggestions when type. I think we also have to search history and first elements show search history match and only then suggestions.

Another question. What suggestions will show? Articles that it finds? When select article what to do? Navigate to article or search article title? Or search what is currently entered?

kiranetph commented 5 years ago

I think we also have to search history and first elements show search history match and only then suggestions.

Check the LAZADA link and do same searches .. I think this is a good example.

Another question. What suggestions will show? Articles that it finds? When select article what to do? Navigate to article or search article title? Or search what is currently entered?

Hmm ... the most logic thing would be a result based on the full text search. (see LAZADA link earlier)

A cool feature would be a an optional template for the results. Example Image and title.

The search should process what is entered ... similar as it is in Cobalt 8