django haystack autocomplete with bootstrap

Question

I'm trying to make django Haystack autocomplete work. Finally I made it work but it doesn't show-up properly. I used haystack autocomplete example. I got data generated from db and printed on website. But bootstrap won't show them properly. I think I should change html tags to show them properly. This is how it looks like now: Header gets enlarged accoding to number of autocomplete fields. This is its html:

<div class="ac-results">
    <div class="result-wrapper">
        <a class="ac-result" href="/stocks/detail/ISD">
            ISD
        </a>
    </div>
    <div class="result-wrapper">
        <a class="ac-result" href="/stocks/detail/ISA">
            ISA
        </a>
    </div>
    <div class="result-wrapper">
        <a class="ac-result" href="/stocks/detail/ISF">
            ISF
        </a>
    </div>
    <div class="result-wrapper">
        <a class="ac-result" href="/stocks/detail/ISS">
            ISS
        </a>
    </div>
    <div class="result-wrapper">
        <a class="ac-result" href="/stocks/detail/ISG">
            ISG
        </a>
    </div>

</div>

This is shown with block on div elements. How to use it properly with bootstrap?

Answer 1

I would not use the javascript in that example, it's a simple example to get you up and going. I have accomplished this with haystack, but used jQuery UI's Autocomplete widget instead - it will automatically position itself correctly below the input box you have attached it to:

http://jqueryui.com/autocomplete/

Also worth checking out is Twitter's new autocomplete widget:

http://twitter.github.io/typeahead.js/

However if you want to use the javascript in the haystack example, then you need to apply some CSS, e.g.

.ac-results {
  position: absolute;
  top: 40px;
  left: 600px;
  width: 150px;
}

You'd obviously have to tweak the pixels accordingly. Also, the HTML should be changed to using UL list and LI list items to make this easier to style. Again, save yourself a headache and try a library that provides an autocomplete widget where you basically just tell it which input element you want to provide suggestions for and plugin the URL to your django ajax endpoint. Good luck.

Answer 2

It wouldn't hurt to take look Mike Hibbert tutorial http://www.youtube.com/watch?v=B-n6_m66TmA If nothing you will better understand how django-haystack works. Also his tutorial on ajax search and this http://www.youtube.com/watch?v=utR1KtRFvxg It help me a lot. Good luck.