使jQuery自動完成結果，鏈接

我使用jQuery自動完成，與jquery-ui捆綁在一起。無論如何，我需要自定義這一點來彈出鏈接，而不是文本。使jQuery自動完成結果，鏈接

我有一個多維PHP數組，其中包含一些文本和MYSQL數據庫中的文本相應的ID。因此，現在我有一個多維js數組。但我不知道如何使用這些值創建鏈接。

數組中的文本項應該是鏈接的文本部分，並且ID應該是鏈接的URL。

這是我現有的代碼。如何自定義這個才達到我的puurpose ...

$("#search_query").autocomplete({ 
    source: javascript_array 
});

來源

2016-04-15 TharinduLucky

使用_renderItem選項：控制在小部件菜單每個選項的創建

方法。該方法必須創建一個新的<li>元素，將其追加到菜單中，並且將其返回。

_renderItem: function(ul, item) { 
    return $("<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>") 
    .appendTo(ul); 
}

1）刪除此：

.autocomplete("instance")._renderItem = function(ul, item) { 
    return $("<li>") 
    .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
    .appendTo(ul); 
};

2）它添加在這裏代替。確保你有一個href參數，否則大多數瀏覽器都不會將它作爲鏈接知道。

$("#project").autocomplete({ 
     minLength: 0, 
     source: projects, 
     focus: function(event, ui) { 
     $("#project").val(ui.item.label); 
     return false; 
     }, 
     select: function(event, ui) { 
     $("#project").val(ui.item.label); 
     $("#project-id").val(ui.item.value); 
     $("#project-description").html(ui.item.desc); 
     $("#project-icon").attr("src", "images/" + ui.item.icon); 

     return false; 
     }, 
     _renderItem: function(ul, item) { 
      return $("<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>") 
       .appendTo(ul); 
     } 
    });

來源

2016-04-15 12:11:25

謝謝！你能告訴我在哪裏添加這段代碼嗎？你可以使用我的代碼顯示它..？ – TharinduLucky

@TharinduLucky - 我增加了更多的信息給答案。如果這有助於請點擊我的答案:) –

謝謝！這使得更有意義:)無論如何，我不明白這些'ui.item.value'和其他的東西是什麼意思。我認爲這是指出數組中每個元素的方式。你能不能給我看一個'projects'的樣本數組？那麼，它會更清楚.. – TharinduLucky

$(function() { 
    var projects = [ 
     { 
     value: "jquery", 
     label: "jQuery", 
     desc: "the write less, do more, JavaScript library", 
     icon: "jquery_32x32.png" 
     }, 
     { 
     value: "jquery-ui", 
     label: "jQuery UI", 
     desc: "the official user interface library for jQuery", 
     icon: "jqueryui_32x32.png" 
     }, 
     { 
     value: "sizzlejs", 
     label: "Sizzle JS", 
     desc: "a pure-JavaScript CSS selector engine", 
     icon: "sizzlejs_32x32.png" 
     } 
    ]; 

    $("#project").autocomplete({ 
     minLength: 0, 
     source: projects, 
     focus: function(event, ui) { 
     $("#project").val(ui.item.label); 
     return false; 
     }, 
     select: function(event, ui) { 
     $("#project").val(ui.item.label); 
     $("#project-id").val(ui.item.value); 
     $("#project-description").html(ui.item.desc); 
     $("#project-icon").attr("src", "images/" + ui.item.icon); 

     return false; 
     } 
    }) 
    .autocomplete("instance")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
     .appendTo(ul); 
    }; 
    });

您可以使用任何自定義屬性值，標籤必須其餘都是按照您的要求（在這裏我們使用desc and icon）。

來源

2016-04-15 12:12:32

使jQuery自動完成結果，鏈接

回答

相關問題