Question

This seems like a question that would have already been asked, but I couldn’t find quite what I was looking for, so I’ll just go ahead and ask.

I’m trying to use angular.js to make an instant search function on my site. I want users to be able to search through Posts (by title and content, ideally) instantaneously, so after hearing about angular’s ability to do this, I gave it a shot.

I have this going on in my posts.js.coffee file:

@PostListCtrl = ($scope, $http) ->
  $http.get("posts.json").success (data) ->
    $scope.posts = data

And this going on in the JSON doc it references (just to make sure it was working — which it is).

data =
    [
    name: "Blog ex"
    content: "This is my example post."
    ,
    name: "Test posting"
    content: "A different ex post"
    ,
    name: "Test3"
    content: "This has some unusual, unique vocabulary."
    ]

Now all I have left to do is get Rails to save an object (with name/content attributes) in the above JSON file each time a new Post is created, so that the search actually runs through meaningful data. I’m new to Rails/JSON/computer stuff and don’t have a clue how to do this. I’m guessing it’s in the posts controller, maybe in one of those respond_to blocks, but if anyone could point me to the right way to do this, I’d appreciate it.

Answer 1

If all you want is an instant search, or autocomplete functionality, you should not use Angular.js or any other JS MVC frameworks. Instead, consider using jQuery as @charliefl suggested, it’s easy. A simple Ajax call will do it.

JS MVC frameworks are heavy, and you need to design the architecture from the bottom to suit them. Not worthy for such a single functionality.

To make this function work in jQuery, basically:

1. Listen the event on search box, say typing one or more characters
2. Catch the characters and use jQuery Ajax to send a POST request to a method in PostsController in Rails, say “search”
3. Make this method respond to JSON.
4. Update DOM according to server response.