Question

我试图用一些html返回我的预先输出结果来添加链接。我刚刚了解了荧光笔功能，但我正在努力正确地返回链接，因为我需要item.id这是我的json响应的一部分。

这是我的剧本：

polygon = functools.reduce(lambda a, b: a.union(b), polygons)

我的json回复如下：

$('.lookup').typeahead({

  displayText: function(item) {
      return item.label
  },
  afterSelect: function(item) {
      this.$element[0].value = item.value;
       $('#contact_id').val(item.id);
       $('#form_search_contact').submit();
  },
  source: function (query, process) {
    return $.getJSON('ajax_get_json.php', { query: query, what: 'location_autocomplete_contacts' }, function(data) {
      process(data);
    })
  },    
  highlighter: function(item) {
      return ('<a href="ajax_selectcontact.php?contact_id='+item.id+'&redirect_to=index.php">appt.</a>->'+ item);
  }


});

item.id没有传入我在荧光笔链接中创建的链接。

我还需要显示文字吗？

我希望显示文本仅显示为标签，然后当用户突出显示选项时，然后显示脚本的突出显示部分中显示的信息。如果这是不可能的，我只能显示荧光笔html。

Answer 1

我使用map作为全局对象来拉出荧光笔功能中的id属性。您可以在文本框中按“a”。该链接将显示内部ID。

$('input.typeahead').typeahead({
	    source:  function (query, process) {
      
    map = {};
  items = [];
    var data =[{"label":"Contact: Screech Powers-> Powers, Screech: 1980-02-05","value":"Powers, Screech","id":"4258"},
    {"label":"Contact: Demo, Screech: 1985-02-05","value":"Powers, Screech","id":"1001"},
    ]
 
    $.each(data, function (i, item) {
        map[item.label] = item;
        items.push(item.label);
    });
 
    process(items);
    },
    
    highlighter: function(item) {
    
  
    
      return ('<a style="color: red" href="ajax_selectcontact.php?contact_id='+map[item].id+'&redirect_to=index.php">appt.</a>->'+ item);
  }
  
	});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<div class="row">
	<div class="col-md-12 text-center">
		<br/>
		<h1>Search Dynamic Autocomplete using Bootstrap Typeahead JS</h1>	
			<input class="typeahead form-control" style="margin:0px auto;width:300px;" type="text">
	</div>
</div>

Answer 2

我正在做的测试是尝试在点击链接时显示警告。警报从不显示。通过这种方法，我可以在表单中填充隐藏的表单字段并提交它，从而与我原始的URL做同样的事情。

$('.lookup').typeahead({
items: '20',
scrollHeight: '100',
autoSelect: true,    
  afterSelect: function(item) {
      this.$element[0].value = map[item].value;
       $('#contact_id').val(map[item].id);
       $('#form_search_contact').submit();
  },
  source: function (query, process) {

      map = {};
      items = [];
      var data = $.getJSON('ajax_get_json.php', { query: query, what: 'location_autocomplete_contacts' }, function(data) {

          $.each(data, function (i, item) {
          map[item.label] = item;
          items.push(item.label);
    });

      process(items);
      });

  },
  highlighter: function(item) {
      return ('<a href="#" id="make_appt_link_search">appt.</a>->'+ map[item].label);
  }


 });

 $(".typeahead").on( "click", "li #make_appt_link_search", function(e) 
 {
     e.preventDefault();
     alert('');
 });

Bootstrap typeahead：返回html

2 个答案: