Avatar billede Morten Professor
07. februar 2017 - 09:07 Der er 7 kommentarer og
1 løsning

Autocomplete mysqli søgeboks

Hej Eksperter

Nu er jeg kommet lidt længere med min auto complete æøå virker også nu, men bliver nød til at få en lille hånd med at få boksen at komme frem med noget. Har teste mine overskrifter kommer frem i sqlen (autocomplete.php)

(autocomplete.php)
<?php
$con = mysqli_connect("localhost","root","","fluefiskersiden");
// Check connection
if (mysqli_connect_errno())
{
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// mysqli_select_db($mysqli, $database_mysqli ); // gøres i mysqli_connect
        /* Soeg */
        $word = $_POST['ord'];
        $soegeord = '%' . $word . '%';
        if ($stmt = $con->prepare('SELECT `id`, `mainid`, `menunavn`, `overskrift`, `billede`, `tekst`, `sted`, `forfatter`, `datetime` FROM `tbl_oversigt` WHERE overskrift LIKE ?')) {
            /* Bind parametre */
            $stmt->bind_param('s', $soegeord);
           
            /* Eksekver forespørgslen */
            $stmt->execute();

            /* Bind resultatet */
            $stmt->bind_result($S_id, $S_mainid, $S_menunavn, $S_overskrift, $S_billede, $S_tekst, $S_sted, $S_forfatter, $S_datetime);
           
            /* Forkort tekst */
           
            while ($stmt->fetch()) {
                echo $S_overskrift.'<br />';
;
               
            }
        } else {
            /* Der er opstået en fejl */
            echo 'Der opstod en fejl i erklæringen: ' . $con->error;
        }
   
?>
<script type="text/javascript" src="js/autocomplete-0.3.0.min.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
  $("#ord").autocomplete("autocomplete.php", {
        selectFirst: true
  });
});
</script>
<body>
<label>ord:</label>
<input name="ord" type="text" id="ord" size="20"/>
Avatar billede olsensweb.dk Ekspert
07. februar 2017 - 09:52 #1
ref http://www.computerworld.dk/eksperten/spm/1015484?k=8248213
citat
>Jeg har fundet et fint script til auto søg
hvor henne ?? kom med et link, andre kunne have gavn af det.
du svarede aldrig på dette, det  er jo også der vi kan se hele sammenhængen og resterende filer
/citat


>Har teste mine overskrifter kommer frem i sqlen (autocomplete.php)
så er det nok noget javascript det er galt med

lav evt en skrabet demo så vi kan se det.
Avatar billede olsensweb.dk Ekspert
07. februar 2017 - 10:11 #2
ref
<script type="text/javascript" src="js/autocomplete-0.3.0.min.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>


er autocomplete-0.3.0.min.js baseret på jquery ??
i givet fald skal der byttes om på de 2 script

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/autocomplete-0.3.0.min.js"></script>
Avatar billede olsensweb.dk Ekspert
07. februar 2017 - 13:09 #3
prøv at tage udgangs punkt i
http://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/   
hvis du ikke gider kopierer filerne ind kan de downloades fra ovenstående link

ref download fra ovenstående link

index.php
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#skills" ).autocomplete({
      source: 'search.php'
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="skills">Skills: </label>
  <input id="skills">
</div>
</body>
</html>


search.php
<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'test';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['skill'];
}
//return json data
echo json_encode($data);
?>




sql dump
CREATE TABLE IF NOT EXISTS `skills` (
  `id` int(11) NOT NULL,
  `skill` varchar(255) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


INSERT INTO `skills` (`id`, `skill`) VALUES
(1, 'ActionScript'),
(2, 'AppleScript'),
(3, 'Asp'),
(4, 'BASIC'),
(5, 'C'),
(6, 'C++'),
(7, 'Clojure'),
(8, 'COBOL'),
(9, 'ColdFusion'),
(10, 'Erlang'),
(11, 'Fortran'),
(12, 'Groovy'),
(13, 'Haskell'),
(14, 'Java'),
(15, 'JavaScript'),
(16, 'Lisp'),
(17, 'MySQL'),
(18, 'Oracle'),
(19, 'Perl'),
(20, 'PHP'),
(21, 'Python'),
(22, 'Ruby'),
(23, 'Scala'),
(24, 'Scheme'),
(25, 'SQL');

ALTER TABLE `skills`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `skills`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=26;



så skal du bare lave search.php om til Prepare Statement
Avatar billede olsensweb.dk Ekspert
07. februar 2017 - 14:42 #4
Deres search.php omskrevet til Prepare Statement kunne se sådan ud

search.php
<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'test';
//connect with the database
$con = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
$con->set_charset( "utf8" ); // afh æøå

//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$sql = "SELECT skill FROM skills WHERE skill LIKE ? ORDER BY skill ASC";
$data = array();
$soegeord = '%' . $searchTerm . '%';
/* Soeg */
if ($stmt = $con->prepare($sql)) {
    /* Bind parametre */
    $stmt->bind_param('s', $soegeord);
    /* Eksekver forespørgslen */
    $stmt->execute();
    /* Bind resultatet */
    $stmt->bind_result($skill);
    while ($stmt->fetch()) {
        $data[] = $skill;
    }
} else {
    echo "fejl i sql";
}
//return json data
echo json_encode($data);
?>
Avatar billede Morten Professor
07. februar 2017 - 15:25 #5
1000 tak for alt dit arbejde med det. Jeg vil prøve det hele af. Og tak fordi du hjælper mig. Du giver min en masse god ting at arbejde med. Og du giver mig også mulighed for at forstå det. Så jeg en anden gang har noget at se tilbage på.
Avatar billede Morten Professor
07. februar 2017 - 15:26 #6
Med venlig hilsen Morten
Avatar billede Morten Professor
12. februar 2017 - 19:45 #7
Hej

Jeg kom frem til en løsning med bider fra forskellige sider, og din hjælp Olsen.

index.php
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
 
<script>
$(document).ready(function(){
    // when any character press on the input field keyup function call
    $("#searchword").keyup(function(){
        $.ajax({
        type: "POST", // here used post method
        url: "search.php",//php file where retrive the post value and fetch all the matched item from database
        data:'searchterm='+$(this).val(),//send data or search term to readname file to process
        beforeSend: function(){
            // show loader icon
            $("#searchword").css("background","#FFF url(LoaderIcon.gif) no-repeat 175px");
        },
        success: function(data){
            // get the output from database on success
            $("#id_suggesstions").show();//show the suggestions
            $("#id_suggesstions").html(data);//append data in the box for selection
            $("#searchword").css("background","#FFF");
        }
        });
    });
});
// call this function after select one of these suggestion for hide the suggestion box and select the value
function selectname(selected_value) {
    $("#searchword").val(selected_value);
    $("#id_suggesstions").hide();
}
</script>
<body>


<div class="search-frm">
    <form name="search-example" method="" action="">
        <input type="text" id="searchword" placeholder="Start search with your name" />
        // search input form for type
    </form>
    <div id="id_suggesstions">
        // this area for show the jquery ajax autocomplete search result
    </div>
</div>
</body>
if(!empty($_POST["searchterm"]))
{
    $con->set_charset( "utf8" );
 
        $sql = "SELECT `id`, `mainid`, `menunavn`, `overskrift`, `billede`, `tekst`, `sted`, `forfatter`, `datetime` FROM `tbl_oversigt` WHERE overskrift LIKE ? ORDER by overskrift limit 0,10";

$soegeord = '%' . $_POST['searchterm'] . '%';
/* Soeg */
if ($stmt = $con->prepare($sql)) {
    /* Bind parametre */
    $stmt->bind_param('s', $soegeord);
    /* Eksekver forespørgslen */
    $stmt->execute();
    /* Bind resultatet */
    $stmt->bind_result($S_id, $S_mainid, $S_menunavn, $S_overskrift, $S_billede, $S_tekst, $S_sted, $S_forfatter, $S_datetime);
   
    while ($stmt->fetch()) {
      ?>
                <ul id="name-list">
                <?php
                {
                ?>
                    <li onClick="selectname('<?php echo $S_overskrift; ?>');"><?php echo $S_overskrift; ?></li>
                <?php
                }
                ?>
                </ul>
        <?php }   
    }}
?>
Avatar billede olsensweb.dk Ekspert
12. februar 2017 - 20:08 #8
ja jeg kom frem til en anden løsning
men det kan løses på mange måder

index.php
<?php
require_once("connection.php");
?>
<!doctype html>
<html lang="da">
<head>
  <meta charset="utf-8">
  <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#ord" ).autocomplete({
      source: 'search.php'
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
    <form method="post" action="">
        <input name="ord" id="ord" type="text" >
        <input type="submit" name="soeg" id="soeg">
    </form>
</div>


<?php
// http://www.computerworld.dk/eksperten/spm/1015224?k=8246918
if (isset($_POST['soeg'])) {
    /* Sæt værdier på parametrene */
    $word = $_POST['ord'];
    // her bør $word "kogevaskes", så evt ulovlige tegn fjernes


    if (strlen($word) > 0) {
        $soegeord = '%' . $word . '%';
        /* Soeg */
        if ($stmt = $con->prepare('SELECT `id`, `mainid`, `menunavn`, `overskrift`, `billede`, `tekst`, `sted`, `forfatter`, `datetime` FROM `tbl_oversigt` WHERE overskrift LIKE ?')) {
            /* Bind parametre */
            $stmt->bind_param('s', $soegeord);

            /* Eksekver forespørgslen */
            $stmt->execute();

            /* Bind resultatet */
            $stmt->bind_result($S_id, $S_mainid, $S_menunavn, $S_overskrift, $S_billede, $S_tekst, $S_sted, $S_forfatter, $S_datetime);

            while ($stmt->fetch()) {
                echo $S_overskrift;
                echo "<br>";
                echo $S_menunavn;               
            }
        } else {
            /* Der er opstået en fejl */
            echo 'Der opstod en fejl i erklæringen: ' . $con->error;
        }
    }
}
?>
</body>
</html>


search.php
<?php
require_once("connection.php");
//get search term
$searchTerm = $_GET['term'];
$sql = "SELECT overskrift FROM tbl_oversigt WHERE overskrift LIKE ? ORDER BY overskrift ASC";
$data = array();
$soegeord = '%' . $searchTerm . '%';
/* Soeg */
if ($stmt = $con->prepare($sql)) {
    /* Bind parametre */
    $stmt->bind_param('s', $soegeord);
    /* Eksekver forespørgslen */
    $stmt->execute();
    /* Bind resultatet */
    $stmt->bind_result($overskrift);
    while ($stmt->fetch()) {
        $data[] = $overskrift;
    }
} else {
    echo "fejl i sql";
}
//return json data
echo json_encode($data);
?>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester