Django的草堆自动完成与引导 [英] django haystack autocomplete with bootstrap

问题描述

我试图让Django的草堆自动完成的工作。最后我做了工作，但它并不显示-正确。我用草垛自动完成的例子。我从数据库生成并打印在网站上的数据。但是，自举不会告诉他们正确。我想我应该改变html标签正确显示它们。
这是它的外观像现在：

头被扩大到accoding自动完成字段数。这是它的HTML：

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>

这是显示对div元素块。

如何使用引导正确地使用它？

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

推荐答案

我不会使用的JavaScript在这个例子中，这是一个简单的例子，让您去。我与草垛做到了这一点，但使用jQuery的用户界面的自动完成构件，而不是 - 它会自己正确的自动定位低于已将其连接到输入框：

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/

另外值得一检查出是Twitter的新的自动完成构件：

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

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

然而，如果你想使用的JavaScript在草堆例子，那么你需要应用一些CSS，如

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;
}

您会显然有相应调整的像素。此外，HTML应改为使用UL列表和李列表项，使这个更容易的风格。再次，保存自己头疼，并尝试提供了一个自动完成构件，你基本上只是告诉它要提供哪些建议输入元素和插件的URL，你的Django AJAX端点库。祝你好运。

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.

这篇关于Django的草堆自动完成与引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！