ajax user suggest

intermediate ajax, css, js, mysql, php, jquery, knockout 627 misterhaan

it’s been a few years since my ajax suggest guide, and since i’ve rewritten my ajax user suggestion code i figured an updated guide is in order. this guide covers using ajax with jquery and knockout to suggest users when typing in a text input field and support selection with the keyboard or mouse. familiarity with php, mysql, javascript, jquery, knockout, html, and css will make this guide more useful. specific css examples are not given since the best look will depend on the website using it. differences from the previous guide are including jquery and knockout, showing avatar and friend status with suggested usernames, and a single mysql query instead of two that get combined in php.

  1. find matching users
  2. define a view model
  3. create the search field
  4. support mouse selection
  5. support keyboard selection
  6. all 5 pages

create the search field

the other side of knockout is in html. the view model connects via the data-bind attribute. first i need an html input element for collecting usermatch, which will connect via the textInput binding:

<input id=usermatch placeholder="find a person" autocomplete=off data-bind="textInput: usermatch">

the id will be used later to quickly find this element from javascript. the placeholder attribute isn’t a requirement — i use it as an extra hint for what to do with the field. autocomplete does need to be turned off since the suggested users will take its place. i use knockout’s textInput binding because it updates the model while typing in the field rather than waiting until leaving the field.

just after the input i need a place for the results to display. technically my input tag is inside a label tag which itself is inside a form tag, and the results are in an ordered list just after that:

<ol class=usersuggest data-bind="visible: usermatch().length >=3">
  <li class=message data-bind="visible: findingusers">finding people...</li>
  <!-- ko foreach: users -->
  <li class=suggesteduser>
    <img class=avatar alt="" data-bind="attr: {src: avatar}">
    <span data-bind="text: displayname || username"></span>
    <img src="/images/friend.png" alt="*" data-bind="visible: isfriend == 1, attr: {title: (displayname || username) + ' is your friend'}">
  </li>
  <!-- /ko -->
  <li class=message data-bind="visible: !findingusers() && users().length < 1">nobody here by that name</li>
</ol>

there’s a lot more knockout here than there was on the input tag. i use the visible binding to handle different states. the whole ordered list should only show when there are at least 3 characters in the input field because i didn’t want to search for anything less specific than that. then there are messages for when the search is in progress or there were no results. within the user list items i use visible again to control when the friend indicator star displays. the foreach binding pairs well with observableArrays like users — it will repeat everything inside for each of the items in the observableArray. it also lets you access the properties of the array items directly, so avatar, displayname, username, and isfriend don’t need something like users[i]. in front of them. i set the src attribute of the avatar image and the title attribute of friend image using the attr binding. since most users don’t have a displayname and should show their username instead, displayname || username will show displayname if present, otherwise username.

the usersuggest ordered list needs some styling, but a lot of that depends on the style of the site it’s going on. two rules it needs almost all the time are list-style-type: none; to get rid of the numbers this list would normally display, and position: absolute; to keep it out of the flow of the page. i also add a non-transparent background and a border on the sides and bottom, along with margins to adjust its position.

now there’s enough to type in the input field and get back a list of matching users. next, it needs to be able to select one of the suggested users.

  1. find matching users
  2. define a view model
  3. create the search field
  4. support mouse selection
  5. support keyboard selection
  6. all 5 pages

how was it?

comments

there are no comments on this guide so far. you could be the first!

*