使用 jQuery 和 Bootstrap-Typeahead 创建自定义 Type-Head？答案

【问题标题】：Create customize Type-Head using jQuery and Bootstrap-Typeahead?使用 jQuery 和 Bootstrap-Typeahead 创建自定义 Type-Head？
【发布时间】：2015-03-30 22:53:59
【问题描述】：

我正在尝试创建一个像这样的自定义类型-

我所做的是-

HTML-

            <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Example of Twitter Typeahead</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script  type="text/javascript" src="js/bootstrap-typeahead.js"></script>

                <script  type="text/javascript" src="js/typehead_customization.js"></script>
                <link href="css/typehead_customization.css" rel="stylesheet">
            </head>

            <body>
                <div class="bs-example">
                    <input name="typehead_input" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
                </div>
            </body>
        </html>

typehead_customization.css

                .bs-example{
                font-family: sans-serif;
                position: relative;
                margin: 100px;
            }
            .typeahead, .tt-query, .tt-hint {
                border: 2px solid #CCCCCC;
                border-radius: 8px;
                font-size: 24px;
                height: 30px;
                line-height: 30px;
                outline: medium none;
                padding: 8px 12px;
                width: 396px;
            }
            .typeahead {
                background-color: #FFFFFF;
            }
            .typeahead:focus {
                border: 2px solid #0097CF;
            }
            .tt-query {
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
            }
            .tt-hint {
                color: #999999;
            }
            .tt-dropdown-menu {
                background-color: #FFFFFF;
                border: 1px solid rgba(0, 0, 0, 0.2);
                border-radius: 8px;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
                margin-top: 12px;
                padding: 8px 0;
                width: 422px;
            }
            .tt-suggestion {
                font-size: 24px;
                line-height: 24px;
                padding: 3px 20px;
            }
            .tt-suggestion.tt-is-under-cursor {
                background-color: #0097CF;
                color: #FFFFFF;
            }
            .tt-suggestion p {
                margin: 0;
            }

typehead_customization.js -

            $(document).ready(function()
        {
            $('input.typeahead').typeahead({
                name: 'accounts',
                local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
            });
        });

所以，我得到了类似的输出-

因此，每个列表项的自动生成代码是 -

<li><a href="#"></a></li>

每次。

我想要类似的东西-

但我想要一个像这样的输出-

 <div class="resultContainer">
   <div class="resultImage"><img /></div>
   <div class="resultDesc"></div>
   <div class="resultLabel"></div>
  </div>

谁能帮帮我？

提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery css html twitter-bootstrap

【解决方案1】：

试试

var data = {
    "accounts":[
    {
      "value":"Audi",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Audi car",
      "label":"an Audi"
    },
    {
      "value":"BMW",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"BMW car",
      "label":"a BMW"
    },
    {
      "value":"Bugatti",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Bugatti car",
      "label":"a Bugatti"
    },
    {
      "value":"Ferrari",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Ferrari car",
      "label":"a Ferrari"
    }
    ,{
      "value":"Ford",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Ford car",
      "label":"a Ford"
    },
    {
      "value":"Lamborghini",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Lamborghini car",
      "label":"a Lamborghini"
    },
    {
      "value":"Mercedes Benz",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Mercedes Benz",
      "label":"a Mercedes Benz"
    }
    ,{
      "value":"Porsche",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Porsche car",
      "label":"a Porsche"
    }
    ,{
      "value":"Rolls-Royce",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Rolls-Royce car",
      "label":"a Rolls-Royce"
    }
    ,{
      "value":"Volkswagen",
      "image":"http://lorempixel.com/100/100/transport/",
      "description":"Volkswagen car",
      "label":"a Volkswagen"
    }
  ]
};


var suggestions = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $.map(data.accounts, function(d) {
            return {value:d.value, suggest:d}
        })
    });

suggestions.initialize();

$(".bs-example .typeahead").typeahead({
        minLength: 1,
        hint: true,
        highlight: true
    }, {
        name: "suggestions",
        displayKey: "value",
        templates: {
            suggestion: function(data) {
                 console.log(data);
                 var details = "<div class=resultContainer>" 
                               + data.value 
                               + "<div class=resultImage>" 
                               + "<img src=" + data.suggest.image + " />" 
                               + "</div>" + "<div class=resultDesc>" 
                               + data.suggest.description 
                               + "</div><div class=resultLabel>" 
                               + data.suggest.label + "</div></div>";
                 return details
            }
        },
        source: suggestions.ttAdapter()
});

见Typeahead - examples - Custom Templates

Typeahead.js - Unable to choose suggestion

var data = {
  "accounts": [{
    "value": "Audi",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Audi car",
    "label": "an Audi"
  }, {
    "value": "BMW",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "BMW car",
    "label": "a BMW"
  }, {
    "value": "Bugatti",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Bugatti car",
    "label": "a Bugatti"
  }, {
    "value": "Ferrari",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Ferrari car",
    "label": "a Ferrari"
  }, {
    "value": "Ford",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Ford car",
    "label": "a Ford"
  }, {
    "value": "Lamborghini",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Lamborghini car",
    "label": "a Lamborghini"
  }, {
    "value": "Mercedes Benz",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Mercedes Benz",
    "label": "a Mercedes Benz"
  }, {
    "value": "Porsche",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Porsche car",
    "label": "a Porsche"
  }, {
    "value": "Rolls-Royce",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Rolls-Royce car",
    "label": "a Rolls-Royce"
  }, {
    "value": "Volkswagen",
    "image": "http://lorempixel.com/100/100/transport/",
    "description": "Volkswagen car",
    "label": "a Volkswagen"
  }]
};


var suggestions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: $.map(data.accounts, function(d) {
    return {
      value: d.value,
      suggest: d
    }
  })
});

suggestions.initialize();

$(".bs-example .typeahead").typeahead({
        minLength: 1,
        hint: true,
        highlight: true
    }, {
        name: "suggestions",
        displayKey: "value",
        templates: {
            suggestion: function(data) {
                 console.log(data);
                 var details = "<div class=resultContainer>" 
                               + data.value 
                               + "<div class=resultImage>" 
                               + "<img src=" + data.suggest.image + " />" 
                               + "</div>" + "<div class=resultDesc>" 
                               + data.suggest.description 
                               + "</div><div class=resultLabel>" 
                               + data.suggest.label + "</div></div>";
                 return details
            }
        },
        source: suggestions.ttAdapter()
});

.bs-example {
  font-family: sans-serif;
  position: relative;
  margin: 100px;
}
.typeahead,
.tt-query,
.tt-hint {
  border: 2px solid #CCCCCC;
  border-radius: 8px;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  outline: medium none;
  padding: 8px 12px;
  width: 396px;
}
.typeahead {
  background-color: #FFFFFF;
}
.typeahead:focus {
  border: 2px solid #0097CF;
}
.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
  color: #999999;
}
.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  width: 422px;
}
.tt-suggestion {
  font-size: 24px;
  line-height: 24px;
  padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}
.tt-suggestion p {
  margin: 0;
}
.resultDesc,
.resultLabel {
  font-size: 14px;
  font-style: italic;
}

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>



<div class="bs-example">
  <input type="text" class="typeahead tt-query" placeholder="accounts" />
</div>

【讨论】：