Core Boxx – Autocomplete Module

TABLE OF CONTENTS

 

 

LICENSE & DOWNLOAD

GitHub | Source Forge

Core Boxx is released under the MIT License. You are free to use it for personal and commercial projects, and modify it as you see fit. On the condition that the software is provided “as-is”. There are no warranties provided and “no strings attached”. Code Boxx and the authors are not liable for any claims, damages, or liabilities.

 

INSTALLATION

• Copy/unzip this module into your existing Core Boxx project folder.
• Access http://your-site.com/install/autocomplete, this will automatically:
  • Add a new SUGGEST_LIMIT into the settings database.
  • Delete PAGE-install-autocomplete.php itself.
• After installation, access http://your-site.com/autocompelte for the demo page.
• Take note, API-autocomplete.php is a dummy. Fill in with your own functions/API endpoints on the things to you want to add autocomplete to.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

FILES LIST

API

• lib/API-autocomplete.php Dummy autocomplete endpoint – Fill in your own.

ASSETS & PAGES

• pages/PAGE-autocomplete.php Demo page.
• assets/CB-autocomplete.js Autocomplete Javascript.

 

 

PART 1) ATTACH AUTOCOMPLETE

INPUT FIELD
<input type="text" id="name">

LOAD & ATTACH AUTOCOMPLETE
<script src="assets/CB-autocomplete.js"></script>
<script>
autocomplete.attach({
  target : document.getElementById("name"), // target field, required
  mod : "autocomplete", act : "users", // api module & action, required
  data : { // extra data to send, optional
    aaa : "fixed value",
    bbb : document.getElementById("fetch-from-this-field")
  },
  onpick : res => console.log(res) // run this function on pick, optional
});
</script>

 

PART 2) LIBRARY FUNCTION

class Users extends core {
  function suggest ($search) {
    // QUERY
    $this->DB->query(
      "SELECT * FROM `users` WHERE `user_name` LIKE ? LIMIT 0,?",
      ["%$search%", SUGGEST_LIMIT]
    );
 
    // RESULTS
    $res = []
    while ($r = $this->DB->stmt->fetch()) {
      $res[] = [
        "n" => $r["user_name"],
        "v" => $r["user_email"]
      ];
    }
    return $res;
  }
}

Pretty much a normal “search and return results”, take note of 2 things:

• Limit your suggestions with SUGGEST_LIMIT. Bad idea to return a whole list of hundreds of results.
• ["n"] Is the “display name”, the name that users will see in the suggestions box.
• ["v"] Is the “value”, the actual value that will populate the search field.
• ["v"] Is optional. If not defined, we populate the input field with ["n"].

 

 

PART 3) API ENDPOINT

$_CORE->autoAPI([
  "users" => ["Users", "suggest"]
]);

Yep. Shouldn’t be a surprise.