Simple search with Emberjs not working

Question

I am trying to implement a simple search feature, which will filter the results and update the listing.

I tried almost every single tutorial out there, every tutorial seems to be working with its jsfiddle but when I apply the same thing on my project, it does not work at all.

Here is what I am having as a first problem, my search field does not seems to be bound with computed property in controller.

I also tried it as a component but again same issue, if I type anything in search field it does not reflect anything.

Let me share my code here,

input type="text" value=searchText placeholder="Search..."

  searchResults: ( ->
    console.log "On every key press it should come here.."
    model = @get('model')
    searchText = @get('searchText')
    filterByPath = @get('filterByPath')
    visualPath = @get('visualPath')

    if searchText
      searchText = searchText.toLowerCase()
      model = model.filter(item) ->
      Ember.get(item, filterByPath).toLowerCase().indexOf(searchText)>= 0
      model.getEach(visualPath)

    ).property('searchText')

Tried almost the same thing with component, but no luck so far. I am not using handlebars but Emblemjs.

I am not sure If I can reproduce the same issue there, I tried the same code with handlebars it worked. But I want it in emblem. — Shahroon, Aug 21 '15 at 12:28
Check this, http://emberjs.jsbin.com/yovehikaje/edit?html,js,output if you might get an idea of whats going on. — Shahroon, Aug 21 '15 at 12:39

score 1 · Accepted Answer · answered Aug 21 '15 at 13:10

1

You actually need to use computed property in template if you want it to be compiled, then recompiled etc. It is somewhat lazily evaluated so you can't debug that without using this in template first or calling from JavaScript code. So basically you need to use searchResults in your template first.

In demo there was model instead of searchResults. I guess in your application you have similiar setup and same bug.

Fix:

{{#each searchResults as |item|}}
    <li>{{item}}</li>
{{/each}}

Working demo.

answered Aug 21 '15 at 13:10

Daniel Kmak

18,164
7
66
89

Thanks for your help Danial, but it still does not work in my application, in jsbin it does but still same behavior in App. – Shahroon Aug 21 '15 at 14:46
My emblem structure is like this, div.searchBox render 'searchBox' truck div class=viewTrucks:tActive:tInActive div.mapOptionsHeaders span.mOh_1 a.cursor style='color: white;' click="changeSorting 'trucks,name'" # each truck in searchResults render 'trucksList' truck – Shahroon Aug 21 '15 at 14:49
maybe try to setup demo with emblem – Daniel Kmak Aug 21 '15 at 15:11
I could not find Emblem in libraries on jsbin, could you tell me the reasons why the text field is not bound to computed property? What could be the possible reasons? – Shahroon Aug 21 '15 at 15:20
1

Try echoing searchText next to input so you can see if input value is bound. For example, next to input, put(hbs): {{searchText}}. If it gets updated every time you type then re-check if you properly reference searchResults in template. Check also your console if you have any errors when you type or when page loads. Maybe try to get value of searchResults from javascript code and see what you get. – Daniel Kmak Aug 21 '15 at 15:24
1

Thanks @daniel I am able to figure out the issue, it was weird but what can I say, Ember is like another Planet for me :) Issue is not resolved yet, but now it will. – Shahroon Aug 21 '15 at 16:00

Simple search with Emberjs not working

1 Answers1