Searching HTML DOM tree with search form

Question

I have a page that's like a dictionary. I have used Umbraco to generate the words in the page and each word has a description. It's nutrition words so it's like 'salt', 'vitamin B12' etc. Now, I have to create a search bar that will search for those words and will return the results and I need it to be fuzzy. I don't need to use Umbraco per say but I am doing the project so far using MVC and razor. I have no idea how to make it search the page.

<div class="row">

            @foreach (var item in Model.Content.Descendants("lekseisDiatrofikouLeksikou"))
            {





                <div class="col-sm-3 styled">
                    <button data-id="@id" type="button" class="btn">
                        @(item.GetPropertyValue<string>("leksi"))
                    </button>
                    <div id="@("button-wrapper"+id)" class="col-xs-12 styled2 text-center nopadding">
                        @Html.Raw(item.GetPropertyValue<string>("perigrafiLeksis"))
                    </div>
                </div>
                id++;
            }

        </div>

This is the loop I'm using to produce the words in the dictionary. This produces a bootstrap col-sm-3 for each word. I literally have no idea how to search these words. Should I search through the DOM tree in HTML?

Answer 1

No! Definitely :) In Umbraco you have Examine / Lucene indexes to enable you fast and easy search feature. It's made to make search easier. You can still perform this operation inside page descendants, but examine will be much better in this case.

Check the introduction and details here: https://our.umbraco.org/documentation/reference/searching/examine/ and then go to https://our.umbraco.org/documentation/reference/searching/examine/overview-explanation to check how to use Fluent API and construct the query with which you'll be able to search only inside nodes that interests you.

It may look like this:

var umbracoHelper = new UmbracoHelper(UmbracoContext.Current);
var searchCriteria = ExamineManager.Instance.CreateSearchCriteria();

var valuesToSearch = new string[] { "salt", "vitamin" };

searchCriteria.NodeTypeAlias("AliasOfYourDictionaryItemDocumentType");
searchCriteria.GroupedOr(new List<string>() { "propertyAliasInWhichWeWantToSearch" }, valuesToSearch);

var results = umbracoHelper.TypedSearch(searchCriteria);

And you'll have a list of items returned from the index search. It's untested, but hopefully will aim you to the right direction. Happy coding!