Question

我正在尝试让django Haystack自动完成工作。最后我使它工作但它没有正确显示。我用了haystack autocomplete example。我从db生成数据并打印在网站上。但是bootstrap不能正确显示它们。我想我应该更改html标签以正确显示它们。这就是现在的样子： header 根据自动填充字段的数量，标题会变大。这是它的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元素上的块一起显示。 blocks header image 如何使用bootstrap正确使用它？

Answer 1

我不会在这个例子中使用javascript，这是一个简单的例子来帮助你。我用haystack完成了这个，但是使用了jQuery UI的自动完成小部件 - 它会自动将自己正确定位在你附加的输入框的下方：

http://jqueryui.com/autocomplete/

另外值得一试的是Twitter的新自动完成小部件：

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

但是如果你想在haystack示例中使用javascript，那么你需要应用一些CSS，例如：

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

你显然必须相应地调整像素。此外，HTML应更改为使用UL列表和LI列表项，以使其更容易样式。再次，让自己头疼并尝试提供自动完成小部件的库，您基本上只需告诉它要为哪个输入元素提供建议并将URL插入到django ajax端点。祝你好运。

Answer 2

看看Mike Hibbert教程http://www.youtube.com/watch?v=B-n6_m66TmA并不会有什么坏处如果没有，你会更好地理解django-haystack是如何工作的。他的ajax搜索教程和http://www.youtube.com/watch?v=utR1KtRFvxg这对我很有帮助。祝好运。

django haystack autocomplete with bootstrap

2 个答案: