Feature FRQ

Summary of Code/examples

Category	Explanation & Code Example
List/Other Collection Type	Uses a list of dictionaries (items) to store gift data with tags.
Procedure Type & Return Type	search_items() filters matching items and returns JSON data.
Parameters	Takes a query string (q) as input to filter results.
Algorithm	Uses sequencing (extract query, search, return results), selection (match query to item names), and iteration (loop through items).
Procedure Call	Triggered by oninput="searchItems()" in the search bar.
Instructions for Output	Displays matching items or an error message dynamically.

---

List/collection type

Uses a list of dictionaries to store item data, including names, links, and associated tags.

// example items pulled from list is api/search.py
items = [
   {"name": "Teddy Bear", "link": "/holiday_frontend/holiday/toys", "tags": {"all": 1, "teddy": 0, "bear": 0, "toys": 0}},
   {"name": "Lego Set", "link": "/holiday_frontend/holiday/toys", "tags": {"all": 1, "lego": 0, "set": 0, "toys": 0}}
]

type: ditionary

purpose: store items, links, tags

Use: fetches from dictionary in frontend to link to pages, and fetches tags in model to add points when interacted with

---

Procedure Type & Return Type

Key procedure searchItems(), queries the item list and returns a JSON list of matching items.

// get function pulled from api/search.py (gets the query from searchbar and returns the name, link, and tags)
@search_api.route("", methods=["GET"])
@token_required()
def search_items():
    query = request.args.get("q", "").lower()
    if not query:
        return jsonify([])

    results = [
        {"name": item["name"], "link": item["link"], "tags": item["tags"]}
        for item in items if query in item["name"].lower()
    ]
    return jsonify(results), 200

Procedure Type: Filters items based on search query

Return Type: JSON list of matching items

---

Algorithm (Sequencing, Selection, Iteration)

Sequencing: extracting the query, earching for matches, returning results.

Selection: The function checks if the query matches any item names.

// query if the item name exsists in the dictionary (selection)
if query in item["name"].lower():

–> If true, the item is added to the results list, If false, it is skipped.

Iteration: Loops through the item, finds matching results, builds the list of related data

// itterating/applying results based on query from selection
results = [
    {"name": item["name"], "link": item["link"], "tags": item["tags"]}
    for item in items if query in item["name"].lower()
]

---

Call to the Procedure

In frontend (index.md), the searchItems() function is triggered when a user types into the search bar.

// when inputing into searchbar function calls
<input 
  type="text" 
  id="searchInput" 
  placeholder="🔍 Search for an item or tag..." 
  oninput="searchItems()"
/>

Event-Driven Execution: Every time a user types (oninput), the search function is called (SearchItems())

---

Instructions for Output Based on Input

The search function outputs a list of matching items or an error message (depending on whether or not paramaters are met)

// input into search bar (when user toby logged in)
{    "name": "Teddy Bear"}

// output for related input 
{
    "message": "Tags for 'Teddy Bear' updated successfully!",
    "tags": {
        "all": 2,
        "bear": 1,
        "teddy": 1,
        "toys": 1
    }
}

// output if input is not found
{
    "error": "Item not found!"
}

//In the frontend, results are displayed dynamically (on the index page):

const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = ''; // Clear previous results

if (items.length > 0) {
    items.forEach(item => {
        const resultDiv = document.createElement('div');
        resultDiv.className = 'result';
        resultDiv.textContent = item.name;
        resultDiv.onclick = async () => {
            await incrementTags(item.name);
            window.location.href = item.link;
        };
        resultsDiv.appendChild(resultDiv);
    });
} else {
    resultsDiv.textContent = 'No results found.';
}

If items exist, they are displayed as clickable elements.

If no matches, “No results found.” is shown.