我想使用简单的自动填充jquery插入

时间:2016-06-15 03:52:11

标签: javascript jquery jquery-plugins autocomplete

大家好,我遇到了轻松自动完成jquery暴跌的问题。

我已经在我的网站上成功安装了这个,但我有一个简单的问题。 i want link this 我想用外部链接链接这个链接。当用户输入并点击这里时,转到外部。



//Enable description function  
var options = {
    url: "json/linked.json",
    
    getValue: "text",

    template: {
        type: "links",
        type: "description",
        fields: {
            link: "website-link",
            description: "realName"
        }
    },

    theme: "bootstrap"
};

 $("#sheroes").easyAutocomplete(options);  

[
	{
		"text": "Home",
        "realName": "Jahid Hasan",
		"website-link": "http://localhost/test/test.php"
	},
	{
		"text": "Guide",
		"website-link": "http://localhost/test/test.php"
	},
	{
		"text": "Themes",
        "realName": "Bruce Wayne",
		"website-link": "http://localhost/test/test.php"
	},
	{
		"text": "Examples",
		"website-link": "http://localhost/test/test.php"
	},
	{
		"text": "Download",
		"website-link": "http://localhost/test/test.php"
	},
	{
		"text": "Github",
		"website-link": "http://localhost/test/test.php"
	}
]




我该怎么做。 提前谢谢

2 个答案:

答案 0 :(得分:0)

您可以在JSON或数据中添加网址,并通过自动填充功能与元素绑定,并调用外部API或此类链接。

$('#scheme').on('autocompleteselect', function (e, ui) 
{  //pass selected value to function    
  doSearch(ui.item.value);
}

重定向到外部链接的功能

function doSearch(location) {
    window.location.href = location;
}

答案 1 :(得分:0)

当用户更改文本时,只需调用window.open方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bruesch- LP3 Advanced Home Page</title>
    <link href="HomeStyle.css" rel="stylesheet" type="text/css">
    <meta content="width=device-width, initial-scale=1" name="viewport">
</head>

<!-- Assignment notes
            -Contains <main> element and is styled with at least 2 declarations
            -Contains <header> element and is styled with at least 2 declarations
            -Contains <nav> element and is styled with at least 2 declarations
            -Contains <footer> element and is styled with at least 2 declarations
            -Has a <meta> viewport
            -Font Family is declared in Body selector
            -Font Size is declared in Body Selector
            -Color properties and values are declared in Body selector
            -Padding and Margin are declared in <img>
            -Boarder Properties are declared in Content ID
            -Links are formated using Pseudo Seletors
            -Text Declaration is used to show Links
            -All CSS is external
            -Checked in Validator
    -->


<body>
    <header>
        <h1>Test</h1><img alt="Crane Lifting HTML Text" height="302" src=
        "html5.jpg" width="400">
    </header>
    <div id="page-wrap">
        <aside>
            <nav>
                <ol>
                    <li>
                        <p><a href="#">Home</a></p>
                    </li>
                    <li>
                        <p><a href="#" target="_blank">Webography</a></p>
                    </li>
                    <li>
                        <p><a href="#" target="_blank">Resume</a></p>
                    </li>
                    <li>
                        <p><a href="#" target="_blank">XML Demo</a></p>
                    </li>
                    <li>
                        <p><a href="#" target="_blank">Contact</a></p>
                    </li>
                </ol>
            </nav>
        </aside>
    </div>
    <h2>The Perks of HTML and CSS</h2>
    <ul>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
    </ul>

<footer><a href="#top">Go to top</a></footer>

</body>
</html>