AngularJs自动完成搜索栏，下拉列表中包含带有文本的图像答案

【问题标题】：AngularJs auto-complete Search bar with Dropdown list having Images with TextAngularJs自动完成搜索栏，下拉列表中包含带有文本的图像
【发布时间】：2017-02-28 22:03:41
【问题描述】：

我需要实现一个下拉菜单，其中包含图像和相应文本的选项，用户可以在其中键入搜索查询，并且每次击键都会更新下拉列表。我使用Angular-Strap typeheads 来实现这个功能。

这是我的 angularjs sn-ps -

$scope.productsDisplayed = $scope.allProducts.map(function(product, index) {
  return {
    value: product.Name,
    Name: product.Name,
    Brand: product.Brand,
    Image: product.Image,
    _id: product._id,
    label: "<img src = '" + product.Image + "'> " + product.Name
  }
});

这是我的 html sn-p -

<input ng-model="selectedProduct" bs-options="product as product.label for product in productsDisplayed" placeholder="Enter Product Name" bs-typeahead type="text">

搜索正常，我可以通过每次击键搜索相关产品。

问题

我得到的是下拉列表中的图片链接，而不是图片本身 - 前 - 下拉列表看起来像这样 =>

<img src = '/test/image/upload/v0000000000/products/abcdefghi.jpg'> " + Deodrant

查询

我如何在下拉列表中获取产品的实际图片及其名称？

请不要建议angucomplete-alt，因为我尝试过使用它并发现与角带式打字头相比，图书馆要慢得多。另外，我在这些链接上有图片，所以链接没有错误。

【问题讨论】：

请参考这个，看起来一样，你会得到更好的主意：plnkr.co/edit/?p=preview
@JigarPrajapati 谢谢，但您的链接与这篇文章无关。它打开到“Hello Plunker”。
抱歉，贴错了链接，请参考这个正确的：plnkr.co/edit/1EgIUSbg5qzZgsMEDptu?p=preview
@JigarPrajapati 谢谢，但我看不出它如何解决我在下拉菜单中出现图像的问题。我恳请您再次查看问题的详细信息。

标签： html angularjs drop-down-menu autocomplete angular-strap

【解决方案1】：

使用bs-options="image.value as image.label for image in images"

  $scope.urls = { "Gear": 'https://dummyimage.com/100/000/f00.jpg&text=GEA',
                  "Globe": 'https://dummyimage.com/100/000/0f0.jpg&text=GLO',
                  "Heart": 'https://dummyimage.com/100/000/00f.jpg&text=HEA',
                  "Camera": 'https://dummyimage.com/100/000/fof.jpg&text=CAM'
  };

  $scope.selectedImage;
  $scope.images = [
    {value: 'Gear', label: '<img src="'+$scope.urls.Gear+'"> Gear'
    },
    {value: 'Globe', label: '<img src="'+$scope.urls.Globe+'"> Globe'
    },
    {value: 'Heart', label: '<img src="'+$scope.urls.Heart+'"> Heart'
    },
    {value: 'Camera', label: '<img src="'+$scope.urls.Camera+'"> Camera'
    }
  ];

HTML

<input type="text" 
       class="form-control"
       ng-model="selectedImage" 
       data-min-length="0" data-html="1" 
       data-auto-select="true" data-animation="am-flip-x" 
       bs-options="image.value as image.label for image in images" 
       placeholder="Enter image name" bs-typeahead>

DEMO on PLNKR

【讨论】：