Giter Club home page Giter Club logo

autocomplete's Introduction

autocomplete

BuildStatus codecov

Our autocomplete tool can be found on Heroku here!

What?

Create an autocomplete search bar

Why?

To practice node and writing back-end things.

How?

Front-end

  • Create webpage with input field to submit
  • XHR on keypress
  • Update
    with retrieved search suggestions

Back-end

  • Import word list as variable (API? txt file?) (pair A)
  • Create end point for requests (a server) (pair B)
  • Send response of search suggestions back to front-end

Testing

  • Unit testing as we go

Stretch Goals

  • Modularise files
  • Set up Continuous integration with Travis, and code coverage using Codecov and istanbul.
  • Look at categorising words ie. trousers in Menswear

Setup

  • To install npm dependencies:
npm i
  • To run the server:
npm run devStart
  • To run tests:
npm test
  • To check code coverage run:
npm run coverage

autocomplete's People

Contributors

skibinska avatar cleop avatar rhodespeter avatar

Watchers

James Cloos avatar

Forkers

cleop skibinska

autocomplete's Issues

Test clarity

QUnit.test( "test displayOptionsList", function( assert ) {
  document.getElementsByTagName("input")[0].value = "";
  wordFinder.displayOptionsList();
  assert.equal(document.getElementById("results").style.display, "none", "sets display to none" );
});

Perhaps at the start of this test create a variable that stores the initial display style of the input element (visible/block), then after the wordFinder.displayOptionsList function make another variable that holds the new display style, then compare the two in the test

test.html

At [autocomplete/public/test/test.html] all your tests are passing... but there aren't any tests.

Autocompletion breaks with non-alphanumeric characters

E.g you'll get suggestions when typing 'he' but if you type 'he\' they stop.

The server strips all non-alphanumeric characters before searching for words and if you look at network activity in dev tools you can see that it's correctly sending back responses that are valid for the input with the non-alphanumeric characters stripped out.

So possibly this is a bug in the Chrome implementation of datalist but I'm not sure how to investigate further.

Modularity

Your server.js file requires the handler.js file which deals with the routes and logic of the server.
It may be cleared to separate the handler file into a routes file (which contains logic to handle endpoints), and have that require separate handlers. Currently this is not too much of an issue currently as the application has few endpoints, but having a single handler file in the future could be confusing to navigate through

file structure - grouping file types together

If you have more than one/two files of a certain type it would be good to think about putting them in designated folders.

eg. all the front-end js files to go in public/js and css in public/(styles or css)

Npm i

Sorry if this sounds a little petty, but you should include installing the dependencies npm i in the setup instructions

Handler Testing

At the moment you are testing the string that gets returned out of the handler function in src/handler.js

I don't think this is a good practice.

I would say a better test would be to test what data the response.end(data) is called on

Something like:

tape('handler', function (t) {
  handler({ url: '/' }, {
  writeHead: function (status, obj) { 
    t.equal(status, 200);
    t.equal(obj, ...);
  },
  end: function (data) {
    t.equal(data, ...);
  }
}
}

I'm not sure if that will work, but something similar to that

Helper functions...

function validateInput(query) {
  return query.replace(/[^a-z]/gi, '');
}

function makeRegExp(input) {
  return new RegExp('^' + input, 'i');
}

function match(list, regex) {
  return list.filter(function(word) { return regex.test(word); });
}

These are great! :) We used methods like these throughout our project but didn't think to wrap them in functions, nice :)
Perhaps put these into a 'helpers.js' file and require it in to files that need it?

handlerForSearch

function handlerForSearch (request, response) {
  var searchTerm = request.url.split('?q=')[1];
  response.writeHead(200, {'content-type': 'text/plain'});
  response.end(JSON.stringify(runSmartMatch.smartMatch(searchTerm).slice(0, 10)));
}

Incase there are any issues of the formatting of queries that are passed into this function, use a module like 'url', where you can use .parse methods to access different segments of the url (an object for query holds key and value pairs for the query).
You could then easily have a few checks to see if query formatting is correct and provide a fail case if not

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.