js-py-ngram-full-text-search

As the online demo page shows, the results section has three parts. Title, content and button.

The title is a path of file with hyperlink. This block is meant to be a file header.

The content is a preview text around the match. A string matched is presented with bold font and yellow background color. The location from the beginning of text is shown at the last of this block after "@" with gray color.

A button means there're more hits not shown yet. Pushing a button will show some of these hiding hits. The button acts as a page controler. A page is limitted to 100 hits by default, and a push shows next 100, without removing the older hits. Three types of button are provided. For another hits in same file, for another files, and for partial matches. The "+ More hits after 1 ..." buttons are shown here and there, because only the 1st hit in a same file is shown by default.

When you search "cat", the results of matching "cat" are shown. Also matching to "ca" or "at" are shown as partial matches. Pushing the "Want partial matches?" button will show the partial matches. These partial matches are sometime different to the exact mathes to "ca". If "at" is not found when searching "cat", the result is shown as none and the partial match button is not shown even if there may be "ca".

This library suport only a word for searching at this moment. So, neither of seaching "cat and alice" nor "cat or alice" can not be done.

The html structure is as followings by default.

<div class="head">
  This comes only once at first, showing header informations. 
  It shows nothing by default. 
</div>

<div class="doc">
  This contains all hits for a single document. 
  We will have many of this block. 
  
  <div class="info">
    This contains header information of the document. 
    Showing a hyperlink to the text file. 
  </div>
  
  <div class="hit">
    This contains a hit in the document. 
    A text around the hit is shown 
    and the word are marked by yellow color. 
    We will have many of this block. 
  </div>
  
  <div class="hit">
  </div>
  
  <div class="ui">
    This block contain a button to show 
    more hits in the document. 
  </div>
  
</div>

<div class="doc">
</div>

<div class="ui">
  This block contain a button to show 
  more documents 
  or partial matches. 
</div>