I am stuck on a problem . I am having Code to fill autocomplete with results from wipipedia using wikidata api I have used the following git hub resource .
My HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementing Autocomplete Search using Wikipedia OpenSearch API - Demo by W3lessons</title>
<style>
body {
background: #a8a8a8 url(bg.png);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
color: #7f7f7f;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:18px;
width:100%;
}
h1 { color:#F7F7F7; font-size:24px; font-weight:normal; }
#search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#search button:hover {
background-color:#000;
}
</style>
</head>
<body>
<center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5104998679826243";
/* mysite_indivi */
google_ad_slot = "0527018651";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
<div style="width:50%; margin:0 auto;">
<p style="margin:20px;"><img src="http://w3lessons.info/logo.png" /></p>
<div style="margin:20px;">
<h1>Autocomplete Search using Wikipedia Opensearch API</h1>
<form method="get" id="search">
<input type="text" class="searchbox" value="Type here.. " onblur="if(this.value == '') { this.value = 'Type here..'; }" onfocus="if(this.value == 'Type here..') { this.value = ''; }" name="s">
<button type="submit">Submit</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(".searchbox").autocomplete({
source: function(request, response) {
console.log(request.term);
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
response(data[1]);
}
});
}
});
</script>
</body>
</html>
My Problem is I want to get data in autocomplete in particular category like if I can use this autocomplete on video in page then it should show results only related to video autocomplete in or for music it should show fill only music category results in autocomplete or so on from which category it needs to
action:opensearch is for autocomplete. Use the regular search with incategory:<category_name> prefix:<word_prefix>.
Related
I have a button within my code that should change the text 'hello' to 'Goodbye' but it doesn't work. What mistake have I made? My code is correctly indented in my coding program.
Here is my code:
<!doctype html>
<html>
<head>
<title>chat</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0px;
}
#topBar {
background-color:#33ccff;
width:100%;
height:100px;
z-index:1;
margin:0px;
padding:0px;
position:fixed;
}
'#logo' is the ID of the div that holds the text that I want to change and '#loginbutton' is the button that I want to use.
#logo {
width:15%;
height:60px;
float:left;
background-color:white;
margin-left:20px;
margin-top:20px;
}
#login {
width:10%;
height:60px;
float:right;
margin-right:20px;
margin-top:20px;
border-radius:8px;
}
#loginbutton { --this is the button that I want to change the text with
background-color: #lightgrey;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 30px;
cursor: pointer;
width:100%;
height:60px;
border-radius:10px;
font-family:Impact;
line-height:60px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#loginbutton:hover {
background-color: black;
color: white;
box-shadow: 2px 2px 2px rgba(0,0,0,0.24), 2px 2px 2px 2px rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<div id="topBar">
Here is the button and the div with the text:
<div id="login">
<button id="loginbutton">LOG IN</button> <!--This is the button-->
</div>
<div id="logo">hello</div> <!--This is the text I am trying to change-->
</div>
Here is my JavaScript code that I was using:
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
</body>
</html>
you need to specify () for the function which is missing in this case.
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
I recommend using an event listener instead, to add your click handler
<script type="text/javscript">
document.getElementById("loginbutton").addEventListener('click', function(e) {
document.getElementById("logo").innerHTML = "Goodbye";
});
</script>
Update
Your existing code has a syntax error making it not work properly, where it is missing the parenthesis () after the word function and should look like this
document.getElementById("loginbutton").onclick=function() {
It should be
<script type="text/javscript">
document.getElementById("loginbutton").onclick = function() {
document.getElementById("logo").innerHTML = "Goodbye"; }
//further code
</script>
The spelling text/javscript is not correct. Correct the spelling and then add () after the function word.
See the corrected code snippet below:
<script type="text/JavaScript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
Im new to asp.net and javascript. Fairly educated about html and css. Im trying to complete my asp.net project but having problem with implementing javascript in my aspx page. im trying to create parallax scrolling using stellar.js but its not working.
here is the javascript code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.stellar.js"></script>
<script>
$.stellar({
scrollProperty: 'scroll',
});
</script>
and i have included this line in the head section of my home.aspx page
<script src="JScript.js" type="text/javascript"></script>
but it dosent work. Though it works fine in a simple html page.
Ps- im not using master page or content place holder in this page. It purely consists of html tags, not even one asp tool.
here's the content of home.aspx, if that helps. (and yes im a newbie)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bon Voyage</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="JScript.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<p><span style="color:Red; font-family:myFirstFont;">B</span>on <span style="color:Red; font-family:myFirstFont;">V</span>oyage</p>
HOME
<a href="#aaa" >HOLIDAYS</a>
FLIGHT
HOTELS
BUS
ABOUT
CONTACT US
LOGIN
</div>
<div id="container">
<div class="body1" >
<div class="onbody1">
<img class="icon" src="airplane-57-xxl.png"></img>
<hr width="62%" align="left"><p class="name">Bon Voyage</p> <hr width="62%" align="left">
<p class="desc">Your one stop shop for all your travelling needs.</p>
</div>
</div>
<div class="body2" data-stellar-background-ratio="0.3">
<p >asdadas</p>
</div>
<div class="body3">
<p id="aaa">asdadas</p>
</div>
</div>
</body>
and the css
body
{
width: 100%;
}
#font-face {
font-family: myFirstFont;
src: url(chocolate_hippo.ttf);
}
.header{
position:fixed;
background-color: #333333;
height:70px;
width: 100%;
text-align:right;
line-height: 70px;
z-index:3;
}
.header a{
text-decoration:none;
color: white;
font-weight: 100;
padding-right:20px;
}
.header a:hover{color:#909090 ;}
.header p
{
float:left;
padding-right:150px;
font-family: myFirstFont;
color:White;
font-weight:bold;
font-size:35px;
margin-left:12px;
}
/*--------Style for home page----------*/
.body1
{
background-image: url('imageedit_4_6588588848.jpg');
height:1000px;
background-size:100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
.icon
{
margin-top:160px;
margin-bottom:30px;
margin-left:550px;
height:200px;
width:200px;
border:3px solid white;
border-radius:50%;
overflow: hidden;
transition-duration: 1s;
transition-property: transform;
opacity:0.9;
}
.icon:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
border:8px solid white;
border-radius:1px;
}
.name
{
color:White;
font-size:70px;
opacity:0.8;
margin-left:456px;
margin-top:20px;
border-top:2px solid white;
border-bottom:2px solid white;
-o-transition:background 0.8s ease-in-out;
-ms-transition:background 0.8s ease-in-out;
-moz-transition: background 0.8s ease-in-out;
-webkit-transition: background 0.8s ease-in-out;
}
.desc
{
font-size:30px;
margin-left:350px;
margin-top:20px;
color:White;
opacity:0.9;
}
.body2
{
background-attachment:fixed;
height:500px;
background-image: url('page-4_img01_original.jpg');
background-repeat:no-repeat;
background-size:100%;
}
.body3
{
height:600px;
}
Thanks in advance for all of yours answers.
you forgot to close the type attribute in first line
Report designer contains editable, resizable and draggable fields.
Clicking in field places cursor to start of field end editing start alway at beginning of field.
How to place cursor in field to clicked position so that editing start at clicked position ?
jquery, jquery ui, bootstarp, ASP.NET MVC4 are used.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.panel-resizable {
min-height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
.panel {
margin-bottom: 0;
}
.verticalline,
.horizontalline,
.rectangle {
font-size: 1pt;
border: 1px solid #000000;
}
.field {
border: 1px solid #000000;
white-space: pre;
overflow: hidden;
}
.captionfield {
white-space: pre;
overflow: hidden;
}
.field,
.captionfield {
font-family: "Times New Roman";
font-size: 10pt;
}
.verticalline {
border-left-style: none !important;
}
.horizontalline {
border-bottom-style: none !important;
}
</style>
<script>
$(function() {
$(".panel-resizable").resizable({
minWidth: "100%",
maxWidth: "100%",
minHeight: 1
});
$(".verticalline, .horizontalline, .rectangle, .field, .image, .captionfield").draggable();
$(".verticalline, .horizontalline, .rectangle, .field, .image").resizable();
});
</script>
</head>
<body>
<div class='panel'>
<div class='panel-body panel-resizable'>
<div class='field' contenteditable='true'>IR("Kreedit arvele nr. ")+iif( isnull(g_server),'',psql('select tasudok from dok x where dokumnr= ?dok.krdokumnr'))</div>
<div class='field' contenteditable='true'>IR("Kreedit arvele nr. ")+ iif( isnull(g_server), sql('sele tasudok from dok x where doktyyp+str(dokumnr,7)= "G"+str(dok.krdokumnr,7) ',''),psql('select tasudok from dok where dokumnr= ?dok.krdokumnr'))</div>
<div class='field' contenteditable='true'>vnimi+' '+dok.tasudok</div>
<div class='field' contenteditable='true'>DOK.kuupaev</div>
</div>
<div class='bg-warning'>
<div class='panel-footer'>GroupHeader 1: str(dokumnr)+str(koopia,2)</div>
</div>
</div>
</body>
</html>
I found a tutorial on how to create a simple autosuggest with PHP & MySQL. This is the tutorial I'm using: http://www.2my4edge.com/2013/08/autocomplete-search-using-php-mysql-and.html
When I try this tutorial, I'm finding a bug. When I search, and click on the image or text, the item will not be selected. You have to click in the "white" area. I have tried to change the script, but I still have the same problem, because I still don't know much about JavaScript.
This is the tutorial script:
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".search").keyup(function () {
var searchid = $(this).val();
var dataString = 'search=' + searchid;
if (searchid != '') {
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function (html) {
$("#result").html(html).show();
}
});
}
return false;
});
jQuery("#result").live("click", function (e) {
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function (e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("search")) {
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function () {
jQuery("#result").fadeIn();
});
});
</script>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
}
.content {
width: 900px;
margin: 0 auto;
}
#searchid {
width: 500px;
border: solid 1px #000000;
padding: 10px;
font-size: 14px;
}
#result {
position: absolute;
width: 500px;
padding: 10px;
display: none;
margin-top: -1px;
border-top: 0px;
overflow: hidden;
border: 1px #cccccc solid;
background-color: white;
}
.show {
padding: 10px;
border-bottom: 1px #999999 dashed;
font-size: 15px;
height: 50px;
}
.show:hover {
background: #4c66a4;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<form method="post">
<input type="text" class="search" id="searchid" name="searchid"
placeholder="Search for people"/> Ex:arunkumar, shanmu, vicky<br/>
</form>
<div id="result">
</div>
</div>
</body>
</html>
Search.php
<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$email=$row['email'];
$b_username='<strong>'.$q.'</strong>';
$b_email='<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="author.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>
Please help me to fix this bug, because I want to apply this autosuggest for my website.
In search.php file, instead of
< div class="show" align="left" >
add
<a class="show" align="left" style="display:block" href="javascript:void(0)"
onclick="$('#searchid').val(this.val)">
I didnt checked it,
but just check for syntax error at onclick function, it will work
Here is my piece of code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Shout!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var status=1;
function action() {
if(status==1) {
$("#Layer1").hide("slow");
$("#Layer3").hide("fast");
$("#Layer4").hide("slow");
$("#close").attr("src","open.jpg");
status=0;
}
else if(status==0) {
status=1;
$("#Layer1").show("slow");
$("#Layer3").show("fast");
$("#Layer4").show("slow");
$("#close").attr("src","close.jpg");
}
}
function sendline() {
$("#msg").val(" ");
}
function type() {
var text=$("#msg").val();
$("#Layer6").html(text);
}
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 179px;
top: 3px;
}
#Layer2 {
position:absolute;
width:69px;
height:64px;
z-index:2;
left: 570px;
top: 543px;
}
#Layer3 {
position:absolute;
width:124px;
height:22px;
z-index:3;
left: 473px;
top: 474px;
}
.style1 {
color: #FFFFFF;
font-family: "Segoe UI";
font-weight: bold;
}
#Layer4 {
position:absolute;
width:72px;
height:27px;
z-index:4;
left: 744px;
top: 485px;
}
#Layer5 {
position:absolute;
width:274px;
height:70px;
z-index:5;
left: 422px;
top: 62px;
}
#Layer6 {
position:absolute;
width:638px;
height:356px;
z-index:5;
left: 272px;
top: 105px;
}
-->
</style></head>
<body>
<div class="style1" id="Layer3">
<textarea id="msg" style="height:50px;width:250px" rows="10" cols="80" onkeyup="type()"></textarea></div>
<div id="Layer1">Hello World!<img src="body.jpg" alt="Shout !" width="842" height="554" /></div>
<div id="Layer2"><img src="close.jpg" id="close" width="63" height="64" OnClick="action()"/></div>
<div id="Layer4">
<input type="button" value="Send Line" onclick="sendline()" /></div>
<div id="Layer6" style="color:#FFFFFF;"></div>
</body>
</html>
I'm facing a problem with the type() function.Its simply not running
Any advice on how to get it rnnning?
Thanks!
Your function is running, however it's throwing an error because of the function name:
Uncaught TypeError: string is not a function
or in Firefox:
type is not a function
In short, you can't use type as a function name here, you just need to give it a slightly different name, for exampled typed.
Here's your code only changing the function name, working :)
Rename your type function to something else (try somethingElseThanType just to test), and it should work