algolia自动完成的结果

时间:2017-06-22 09:25:50

标签: javascript ajax algolia

我是使用algolia的新手,我一直在关注js自动完成指南,我已经到了我的结果显示但只有不到一秒然后它们消失的点,并搜索unlick本身以便键入我还需要点击搜索框。我在这里尝试了文档中提供的代码:https://www.algolia.com/doc/guides/search/auto-complete/#multi-category-user-interface

然而这不起作用,我不得不使用algolia search lite,否则我会在algolia.js中出现一些错误

所以我链接脚本:

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>

添加了搜索:

                    <div class="aa-input-container navbar-right" id="aa-input-container">
                        <input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for players or teams..." name="search" onkeyup="search_data(this.value)" autocomplete="off" />
                            <svg class="aa-input-icon" viewBox="654 -372 1664 1664">
                                <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5  C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5  C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342  c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332  s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225  S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
                            </svg>
                    </div>

并在搜索js:

var client = algoliasearch("***", "****")
var businesses = client.initIndex('businesses');
var films = client.initIndex('films');
function search_data(search_value) {
autocomplete('#aa-search-input', {}, [
    {
      source: autocomplete.sources.hits(businesses, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Businesses</div>',
        suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.name.value + '</span><span>'
              + suggestion._highlightResult.type.value + '</span>';
        }
      }
    },
    {
      source: autocomplete.sources.hits(films, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Films</div>',
        suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.title.value + '</span><span>'
              + suggestion._highlightResult.times.value + '</span>';
        }
      }
    }
]);
}

那么我怎样才能解决问题,结果消失,搜索框在每个角色上取消点击?

另外一个不同的问题,如果我在mysql表中有关系,你可以在搜索中以某种方式使用它吗?所以对于每部电影,我想输出business.name。它们是使用mysql中的business_id链接的,但我不知道你是否可以在algolia中做到这一点。谢谢!

0 个答案:

没有答案